Vue Argon Design System is a free, open-source Vue.js UI kit and starter template built on Bootstrap 4 by Creative Tim, providing over 100 coded components and prebuilt pages for building responsive websites.
What is Vue Argon Design System?
Vue Argon Design System is a Vue.js component library and starter project based on Bootstrap 4, created by Creative Tim and released under the MIT license. It takes the standard Argon Design System and reimplements every element as reusable Vue single-file components, so developers get a full component tree rather than static HTML. The result is a production-ready codebase with a Vue Router setup, example views, and global plugin registration that outputs a complete marketing site or app shell.
Key Features
- 100+ coded components — The system includes over 100 individual Vue components such as Badge.vue, BaseButton.vue, BaseInput.vue, BaseNav.vue, Card.vue, Icon.vue, and BaseSlider.vue, each with color, style, hover, and focus states.
- SASS customization — All color and style variations are controlled through SASS files organized under assets/scss, with separate bootstrap and custom folders, so you can re-theme the entire kit by editing variables.
- Prebuilt example pages — The project ships with five runnable views: Components, Landing, Login, Profile, and Register, each wired via router.js to demo routes like /landing, /profile, and /login.
- Vendor icon fonts included — Font Awesome and Nucleo icon fonts are bundled as local assets under assets/vendor, so no external CDN is required to display icons.
- Vue plugin architecture — Two plugins, globalComponents.js and globalDirectives.js, auto-register components and directives, and argon-kit.js bundles them, letting you import the whole system with minimal setup.
- One-click deploy to Genezio — The repository includes a deploy button that clones the project directly to Genezio's platform for serverless hosting.
- Complex documentation — The docs cover Foundations, Components, and the design idea behind the system, hosted on the Creative Tim demo site.
- Broad browser support — The template officially supports the last two versions of Chrome, Firefox, Edge, Safari, and Opera.
Who is it for?
- Vue.js developers who need a ready-made UI foundation and want to skip writing Bootstrap markup from scratch.
- Agencies and freelancers that are building client marketing sites and need a polished, on-brand design with login, register, and profile pages.
- Startup teams that want a quick front end for a landing page and MVP while keeping the ability to customize the design with SASS.
What can you do with Vue Argon Design System?
- Build a landing page in hours — Use the included Landing.vue view and Hero.vue, Examples.vue, and DownloadSection.vue components to assemble a marketing page without starting from zero.
- Prototype an app's authentication flow — The Login and Register views come pre-styled with BaseInput, BaseCheckbox, and BaseButton components, letting you drop in your own auth logic.
- Create a team or user profile page — The Profile.vue view provides a ready layout that can be adapted for user dashboards, about pages, or team rosters.
- Set up a component showcase — The Components.vue view is essentially a living style guide that lists all elements, useful for keeping a design system consistent.
Pricing
Vue Argon Design System is free to use and licensed under MIT, so it can be used in personal and commercial projects without a paid license. The page also mentions the repository can be deployed to Genezio, a serverless platform.
FAQ
Is Vue Argon Design System free?
Yes, it is free and open source. Creative Tim distributes it under the MIT license, and the GitHub repository provides the full source code. You can download it from Creative Tim's website or clone it directly from GitHub.
What pages are included?
The template includes five prebuilt views: Components, Landing, Login, Profile, and Register. These are configured in router.js with routes such as /landing, /profile, /login, and /register, and they demonstrate the main component categories.
What browsers are supported?
The last two versions of Chrome, Firefox, Edge, Safari, and Opera are officially supported. The page lists browser logos for these five browsers as the support target.
How do I customize the colors?
All color variations are handled in SASS files located in assets/scss, split between a bootstrap folder and a custom folder. You can modify the Sass variables in the custom folder and recompile to apply a full theme change.
Can I deploy this template?
Yes, the repository includes a one-click deploy button for Genezio, a serverless platform. You can also deploy it like any Vue.js app to other static hosting services.
