Vue Material Kit 2

Vue Material Kit 2 is a free, open-source Material Design UI kit by Creative Tim, built with VueJS 3 and Bootstrap 5, that ships with over 70 coded components and example pages so developers can start building marketing websites immediately.

What is Vue Material Kit 2?

Vue Material Kit 2 is a design system and UI template for VueJS 3 projects. It takes a Vue 3 and Bootstrap 5 project scaffold and provides pre-built components, Sass files, and example pages as output. The kit is developed and maintained by Creative Tim and is distributed free under the Creative Tim license.

The kit includes more than 70 frontend individual elements, including buttons, inputs, navbars, alerts, and cards. Every component supports color variations that you can edit through Sass files, and all elements are implemented in ready-to-use Vue components. The template also comes with pre-built design blocks and example pages so you can move from prototype to functional code quickly.

Key Features

• 70+ coded components — Buttons, inputs, navbars, alerts, cards, and more, each with customizable color variants via Sass files.
• VueJS 3 and Bootstrap 5 stack — The template is built on Vue 3, Bootstrap 5, and Vite, with Pinia for state management.
• Pre-built example pages — Includes a landing page, an author page, and a basic sign-in page, along with a presentation page under the src/views/Presentation directory.
• Reusable component files — Components such as MaterialAlert.vue, MaterialButton.vue, MaterialInput.vue, MaterialPagination.vue, and MaterialSwitch.vue live in src/components.
• Integrated libraries — Includes Popper.js, PrismJS, TypedJS, Vue Clipboard 3, and Vue Count To for features like tooltips, syntax highlighting, typing animations, clipboard copy, and count-up effects.
• Developer documentation — Creative Tim’s learning lab hosts component-level documentation, and the README provides quick start commands and a file structure overview.
• One-click deployment — The README includes a deploy button that pushes the repository to Genezio without manual configuration.
• Browser support — Officially supports the last two versions of Chrome, Firefox, Edge, Safari, and Opera.

Who should use Vue Material Kit 2?

• Frontend developers — who want a ready-made, component-based starting point for a Vue 3 marketing website without building UI elements from scratch.
• Startups and small teams — that need a landing page or product page quickly and want a Material Design look with minimal design effort.
• Designers — who want to adjust the theme colors and typography through Sass files to match a brand before handing off to development.

What can you do with Vue Material Kit 2?

• Launch a landing page: Use the about-us landing page demo at /pages/landing-pages/about-us as a base for a company or product introduction.
• Build an author or profile page: Start from the author page example and replace placeholder content with team or personal information.
• Create a sign-in page: Use the basic sign-in example to set up authentication screens, then wire it to your own backend.
• Prototype UI elements quickly: Combine the 70+ components into forms, cards, and navigation bars to validate designs in the browser.

How does Vue Material Kit 2 work?

The kit uses the Vite development server. After cloning the repository, install Node.js LTS, then run yarn install or npm install in the root directory to pull dependencies. You can then start the development server using the script defined in package.json. For deployment, the one-click Genezio button in the README sets up a hosted version directly from the GitHub repository.

Pricing

Vue Material Kit 2 is free to use. Creative Tim also sells a PRO version of the kit, with additional components and features, which you can reach through the Buy Page on their website.

FAQ

Is Vue Material Kit 2 free?

Yes, Vue Material Kit 2 is a free VueJS design system from Creative Tim. You can download it from the product page or clone the GitHub repository without paying a license fee.

What technologies does Vue Material Kit 2 use?

The kit is built with VueJS 3, Bootstrap 5, and Vite. It also integrates Pinia for state management, Popper.js for positioning popups, PrismJS for code highlighting, TypedJS for typing animations, and Vue Count To for animated numbers.

How many components does Vue Material Kit 2 include?

The kit ships with over 70 individual frontend elements, including buttons, inputs, navbars, alerts, cards, avatars, badges, checkboxes, pagination, progress bars, social buttons, switches, and text areas.

Does Vue Material Kit 2 support all browsers?

The template officially supports the last two versions of Chrome, Firefox, Edge, Safari, and Opera. Older versions are not tested and may have inconsistent behavior.

Can I deploy Vue Material Kit 2 to Genezio?

Yes, the README includes a deploy button for Genezio. Clicking it deploys a copy of the GitHub repository to Genezio without manual setup, so you can have a live site quickly.