A beautiful UI Kit and Admin for Tailwind CSS and VueJS

by Vue.js Examples

Vue Notus

Start your development with a Free Tailwind CSS and VueJS UI Kit and Admin. Let Vue Notus amaze you with its cool features and build tools and get your project to a whole new level.

Vue Notus is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS.

It is based on Tailwind Starter Kit by Creative Tim, and it is build with both presentation pages, and pages for an admin dashboard.

Speed up your web development with a beautiful product made by Creative Tim . If you like bright and fresh colors, you will love this Free Tailwind CSS Template! It features a huge number of components that can help you create amazing websites.

View Demo View Github

Get Started

  • Install NodeJS LTS version from NodeJs Official Page
  • Download the product on this page
  • Unzip the downloaded file to a folder in your computer
  • Open Terminal
  • Go to your file project (where you’ve unzipped the product)
  • (If you are on a linux based terminal) Simply run npm run install:clean
  • (If not) Run in terminal npm install
  • (If not) Run in terminal npm run build:tailwind (each time you add a new class, a class that does not exist in src/assets/styles/tailwind.css, you will need to run this command)
  • (If not) Run in terminal npm run serve
  • Navigate to https://localhost:8080
  • Check more about Tailwind CSS

Files and Folder

This is the project structure that you will get upon the download:

vue-notus
.
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── img
│   │   │   ├── github.svg
│   │   │   └── google.svg
│   │   └── styles
│   │       ├── index.css
│   │       └── tailwind.css
│   ├── components
│   │   ├── Cards
│   │   │   ├── CardBarChart.vue
│   │   │   ├── CardLineChart.vue
│   │   │   ├── CardPageVisits.vue
│   │   │   ├── CardProfile.vue
│   │   │   ├── CardSettings.vue
│   │   │   ├── CardSocialTraffic.vue
│   │   │   ├── CardStats.vue
│   │   │   └── CardTable.vue
│   │   ├── Dropdowns
│   │   │   ├── IndexDropdown.vue
│   │   │   ├── NotificationDropdown.vue
│   │   │   ├── PagesDropdown.vue
│   │   │   ├── TableDropdown.vue
│   │   │   └── UserDropdown.vue
│   │   ├── Footers
│   │   │   ├── Footer.vue
│   │   │   ├── FooterAdmin.vue
│   │   │   └── FooterSmall.vue
│   │   ├── Headers
│   │   │   └── HeaderStats.vue
│   │   ├── Maps
│   │   │   └── MapExample.vue
│   │   ├── Navbars
│   │   │   ├── AdminNavbar.vue
│   │   │   ├── AuthNavbar.vue
│   │   │   └── IndexNavbar.vue
│   │   └── Sidebar
│   │       └── Sidebar.vue
│   ├── layouts
│   │   ├── Admin.vue
│   │   └── Auth.vue
│   ├── main.js
│   └── views
│       ├── Index.vue
│       ├── Landing.vue
│       ├── Profile.vue
│       ├── admin
│       │   ├── Dashboard.vue
│       │   ├── Maps.vue
│       │   ├── Settings.vue
│       │   └── Tables.vue
│       └── auth
│           ├── Login.vue
│           └── Register.vue
├── tailwind.config.js
└── vue.config.js