Argon Design System

Argon Design System is a free, MIT-licensed design system for Bootstrap 4 by Creative Tim that ships with over 100 coded components and prebuilt example pages.

What is Argon Design System?

Argon Design System is a free, open-source design system for Bootstrap 4 created by Creative Tim. It provides a set of HTML/CSS/JS components, example pages, and SASS files that developers can use to build responsive websites quickly. The system runs in any browser supporting Bootstrap 4 and includes prebuilt landing, profile, login, and register pages.

Key Features

• 100+ coded components — Argon includes over 100 individual components covering buttons, cards, navbars, forms, and more, with multiple states for colors, styles, hover, and focus.
• SASS customization — All components use SASS files, so you can modify colors and styles globally by editing the SCSS source files.
• Prebuilt example pages — Ships with an index page, landing page, profile page, login page, and register page that you can use as starting points.
• Vue.js version available — A separate Vue Argon Design System is offered, and Angular, React, Sketch, and Photoshop versions are listed as coming soon.
• Multiple installation methods — You can install via Bower, Composer, Git, npm (argon-design-system-free), or Yarn.
• One-click deploy to Genezio — The repository includes a deploy button for Genezio, letting you publish your own version of the site without manual setup.
• Complex documentation — Each element is documented at the Creative Tim demo site with sections for foundation and components.

Who is it for?

• Front-end developers — Use Argon to bootstrap a Bootstrap 4 project with ready-to-use components and SASS theming instead of writing CSS from scratch.
• Web designers — Skim the example pages and component gallery to demonstrate UI patterns to clients or extract design ideas.
• Startups building MVPs — Use the prebuilt landing, login, and register pages to set up a basic product site quickly.
• Creative Tim product evaluators — Check the Vue.js version and other framework ports if you work in Vue and want the same design system.

What can you do with Argon Design System?

• Launch a landing page: Use the included examples/landing.html as a starting point and replace placeholder content with your own copy and images.
• Create a user authentication flow: Connect the login and register pages to your backend or an auth service and adapt the forms to your data model.
• Prototype a profile page: Start from examples/profile.html to show user information, activity feeds, or settings sections.
• Build a custom Bootstrap theme: Recompile the SASS files in assets/scss/custom to change brand colors, fonts, and component spacing across the entire system.

How does Argon Design System work?

Argon is a static HTML/CSS/JS kit. You download it via npm, Yarn, Bower, Composer, or GitHub, then include assets/css/argon.css and assets/js/argon.js in your page. To change the look, you edit the SASS files in assets/scss and recompile them; vendor libraries like jQuery, Popper, Bootstrap, headroom, nouislider, and bootstrap-datepicker are bundled under assets/vendor. You can then build your site on the provided examples or deploy directly to Genezio.

Pricing

Argon Design System is free to use under the MIT license. You can download it from GitHub or Creative Tim without a paid tier; the Vue.js version is also free.

FAQ

Is Argon Design System free?

Yes, Argon Design System is free and open source. It is licensed under MIT, so you can use it for personal and commercial projects, modify it, and redistribute it under the same license terms.

What Bootstrap version does Argon use?

Argon Design System is built for Bootstrap 4. The download includes Bootstrap 4 vendor files, and the SASS source in assets/scss/bootstrap is customized to create Argon's own look.

Does Argon Design System include example pages?

Yes. You get an index page, a landing page, a profile page, a login page, and a register page, each available as separate HTML files in the examples/ directory.

Is there a Vue.js version?

Yes, Creative Tim offers Vue Argon Design System as a separate product. Angular, React, Sketch, and Photoshop versions are listed as coming soon.