Vue Now UI Kit is a free, responsive Bootstrap 4 UI kit for Vue.js (2.5) that bundles over 50 UI elements and three ready-made page templates for building flat-design websites.
What is Vue Now UI Kit?
Vue Now UI Kit is a free Vue.js implementation of the popular Now UI design system, created by Creative Tim in collaboration with Invision. It takes design assets originally released in PSD and Sketch formats and turns them into a working HTML/Vue project with reusable components, page templates, and routing. The kit runs on Vue.js 2.5 with Vue CLI 3 for scaffolding, Vue Router for navigation, Bootstrap 4 as the CSS foundation, and Element UI for complex JavaScript components such as tooltips, datepickers, and popovers.
Key Features
- Over 50 UI elements — buttons, forms, navigation, modals, tooltips, datepickers, popovers, and more, all styled to the Now design language and ready to compose into pages.
- Three included page templates — a landing page, a profile page, and a login page, each wired up as a route in the provided router.js file.
- Bootstrap 4 grid system — layout built on the 12-column responsive grid that Bootstrap 4 provides, ensuring components align with standard Bootstrap layouts.
- Element UI integration — complex JavaScript components come from Element UI, which is configured as a plugin in the project.
- Vue Router navigation — routing is handled through a dedicated router.js file, so adding new pages is a matter of adding a route and a view component.
- Cross-platform design source — the same design is available in PSD and Sketch formats via Invision, making this Vue kit the HTML counterpart to those files.
- One-click deploy to Genezio — the GitHub repository includes a deploy button that builds and hosts the template on Genezio without manual server setup.
- MIT license — free to use, modify, and distribute; the project is copyright 2018 Creative Tim.
Who is it for?
- Vue developers who want a pre-built design system with components and page layouts so they can skip hand-writing CSS and focus on application logic.
- UI/UX designers who work in PSD or Sketch and need a working HTML/Vue implementation of the same Now design to hand to development teams.
- Startups and small teams that need a clean, flat-design marketing or product site quickly — the landing, profile, and login templates cover common launch needs.
What can you do with it?
- Launch a product landing page: the landing template provides a hero, feature sections, and call-to-action areas that you can restyle with your own copy and images.
- Create a personal or company profile page: the profile template demonstrates how to display user information, photos, and social links in the Now layout.
- Implement a login flow: the login template gives you a ready-to-style authentication screen that connects to your own backend or auth service.
- Prototype before coding: use the matching Invision PSD/Sketch files to create clickable prototypes, then recreate the approved design with this Vue kit.
How does Vue Now UI Kit work?
Get started by cloning the GitHub repository or downloading the ZIP from Creative Tim, then run npm install or yarn install to install dependencies and npm run serve to launch a local development server. The documentation at demos.creative-tim.com/vue-now-ui-kit/documentation/ explains the component APIs and file structure. The project can also be deployed to Genezio with a single click from the GitHub README.
Pros and cons
- Pros: free and MIT licensed; over 50 components included; three full page templates; built on a familiar stack of Vue, Bootstrap, and Element UI; easy local setup with npm or yarn.
- Cons: targets Vue 2.5 only, so Vue 3 projects will need migration; browser support is limited to the last two versions of Chrome, Firefox, Edge, Safari, and Opera; the free kit does not include a dashboard (Creative Tim sells a separate PRO version for that).
Pricing
The Vue Now UI Kit is free and distributed under the MIT license. A paid "Vue Now UI Dashboard PRO" product exists for dashboard development, but the kit itself is open source.
Alternatives
- Vuetify, which offers Material Design components for Vue.
- Buefy, a UI library built on the Bulma CSS framework.
- PrimeVue, a large component library with its own design system.
FAQ
Is Vue Now UI Kit free?
Yes, the kit is free to download and use under the MIT license. You can clone it from GitHub or download the ZIP from Creative Tim's website without paying, and the source code is available for modification.
What Vue version does Vue Now UI Kit use?
The kit is built with Vue.js 2.5 and Vue CLI 3. If you are starting a new Vue 3 project you will need to migrate the components and Element UI integration yourself, as the project is not set up for Vue 3.
Does Vue Now UI Kit include a dashboard?
No. The free kit includes a components showcase, landing page, profile page, and login page. Creative Tim offers a separate commercial product, Vue Now UI Dashboard PRO, for dashboard-based projects.
What browsers are officially supported?
The creators state that the last two versions of Chrome, Firefox, Edge, Safari, and Opera are officially supported. Older browser versions may not render the components correctly.
Can I deploy Vue Now UI Kit easily?
Yes, the repository includes a one-click deploy button for Genezio that builds and hosts the template. Locally you can run npm run serve for development and npm run build to generate a production bundle.
