Vue Black Dashboard

Vue Black Dashboard is a free, open-source admin dashboard template built with Vue.js and Bootstrap 4, created by Creative Tim for visualizing and managing business data in a dark or light interface.

What is Vue Black Dashboard?

Vue Black Dashboard is a Vue.js-based admin dashboard template that includes over 16 individual UI components, multiple pre-built pages, and a SASS-powered styling system. It takes a standard Vue CLI project structure and provides a complete dashboard layout with navigation, cards, charts, tables, maps, notifications, and user profile screens. The template is developed and maintained by Creative Tim and is licensed under the MIT license.

Key features

• More than 16 components — Buttons, alerts, checkboxes, dropdowns, tables, modals, cards, inputs, and navigation elements are included, offering thousands of possible layout combinations.
• Dark and Light modes — The dashboard ships with two color versions, configurable through SASS variables under src/assets/sass/black-dashboard.
• Chart components — BarChart and LineChart components (in src/components/Charts) provide data visualization using Chart.js configuration.
• RTL and localization — An RTL plugin (RTLPlugin.js) and locale files for English and Arabic (en.json, ar.json) make it suitable for multilingual or right-to-left interfaces.
• Ready-made pages — Includes Dashboard, Profile, TableList, Maps, Notifications, Icons, Typography, and NotFoundPage Vue components.
• Notification plugin — A dedicated NotificationPlugin with Notification and Notifications components enables toast-style messages.
• Browser support — Officially supports the last two versions of Chrome, Firefox, Edge, Safari, and Opera.
• One-click deploy — A deploy button allows hosting the template on Genezio directly from GitHub.

Who is Vue Black Dashboard for?

• Vue.js developers — They can use this template as a base for building custom admin panels, modifying SASS variables and components.
• Startups and small businesses — The ready-made pages and charts let them spin up a data dashboard quickly.
• UI/UX designers — The template provides a starting point for prototyping admin interfaces with a consistent design.

What can you do with Vue Black Dashboard?

• Monitor business metrics — The Dashboard page includes StatsCard, BarChart, and LineChart components to display KPIs and trends.
• Manage user accounts — The Profile page offers EditProfileForm and UserCard components for editing user details.
• Present data in tables — The TableList page provides a pre-built table layout for displaying structured data.
• Show location data — The Maps page integrates maps into the dashboard for geographic visualization.
• Notify users — Use the Notifications page and the NotificationPlugin to trigger styled alerts.

How does Vue Black Dashboard work?

You can start by cloning the repository with git clone https://github.com/creativetimofficial/vue-black-dashboard.git or downloading the ZIP from GitHub or Creative Tim. The project uses a Vue CLI structure with vue.config.js and .babelrc, and all source code is under the src directory. After installing dependencies and running the development server, you can customize SASS files and components and build your own admin panel.

Browser support

The template officially supports the last two versions of Chrome, Firefox, Edge, Safari, and Opera, as stated in the project's README.

FAQ

Is Vue Black Dashboard free?

Yes, Vue Black Dashboard is free and open-source, released under the MIT license. You can download it from GitHub or the Creative Tim website and use it for both personal and commercial projects.

How many components does Vue Black Dashboard include?

The template includes over 16 individual components, including buttons, cards, inputs, tables, modals, dropdowns, and navigation elements. These components can be combined in many different ways to create custom dashboard layouts.

Does Vue Black Dashboard support RTL?

Yes, the template includes an RTL plugin and an Arabic locale file, making it possible to display the dashboard in right-to-left languages.

Where can I find documentation?

Documentation is hosted at demos.creative-tim.com/vue-black-dashboard/documentation, covering installation, customization, and usage of components and plugins.