TailAdmin Vue is a free, open-source admin dashboard template built on Vue.js, popular and progressive JavaScript framework, and Tailwind CSS. This powerful combination provides developers with an extensive library of essential components, elements, and pages to launch a comprehensive and data-centric back-end, dashboard, or admin panel solution for any Vue.js based web projects.
With TailAdmin Vue, you can leverage Vue.js 3 features such as declarative rendering, component-based architecture, Vue Router for routing, and Pinia for state management. It also utilizes the power of Tailwind CSS for rapid UI development with its low-level utility classes and responsive design capabilities.
TailAdmin provides essential UI components and layouts for building feature-rich, data-driven admin dashboards and control panels. It's built on:
- Vue 3 (Vite)
- TypeScript
- Tailwind CSS
- ✨ Visit Website
- 📄 Documentation
- ⬇️ Download
- 🖌️ Figma Design File (Community Edition)
- ⚡ Get PRO Version
To get started with TailAdmin, ensure you have the following prerequisites installed and set up:
- Node.js 18.x or later (recommended to use Node.js 20.x or later)
- Recommended IDE Setup: VSCode + Volar (and disable Vetur).
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
Clone the repository using the following command:
git clone https://github.com/TailAdmin/vue-tailwind-admin-dashboard.gitWindows Users: place the repository near the root of your drive if you face issues while cloning.
-
Install dependencies:
npm install # or yarn install -
Start the development server:
npm run dev # or yarn dev -
Production build:
npm run build # or yarn build
- 1 Unique Dashboard
- 30+ dashboard components
- 50+ UI elements
- Basic Figma design files
- Community support
- 5 Unique Dashboards: Analytics, Ecommerce, Marketing, CRM, Stocks (more coming soon)
- 400+ dashboard components and UI elements
- Complete Figma design file
- Email support
To learn more about pro version features and pricing, visit our pricing page.
TailAdmin is a pre-designed starting point for building a web-based dashboard using Vue.js and Tailwind CSS. The template includes:
- Sophisticated and accessible sidebar
- Data visualization components
- Prebuilt profile management and 404 page
- Tables and Charts(Line and Bar)
- Authentication forms and input elements
- Alerts, Dropdowns, Modals, Buttons and more
- Can't forget Dark Mode 🕶️
All components are built with Vue and styled using Tailwind CSS for easy customization.
💎 High-quality, Premium Modern Design: A thoughtfully designed dashboard template with a deep focus on UX/UI, already trusted and utilized by over 10K+ web apps worldwide.
✨ Vue 3: Get enhanced performance with the latest Vue version.
⚡ Vite Build System: Enjoy quick development with Vite, ensuring fast code compilation.
🔀 Vue Router: Manage app navigation with ease using Vue Router for seamless transitions.
💡 Reactive Utilities: Enhance component reactivity with @vueuse/core utilities.
📊 Charting with ApexCharts: Visualize data with ApexCharts for beautiful analytics.
🗺️ Vector Maps with JSVectorMap: Easily integrate interactive vector maps with JSVectorMap.
🖌️ UI with Tailwind CSS: Frontend UI built on the powerful and versatile Tailwind CSS framework.
💫 TypeScript Support: Write safer, maintainable code with TailAdmin Vue's TypeScript Support.
✅ Linting and Formatting: Maintain a clean codebase with built-in linting and formatting.
🗃️ State Management with Pinia: Handle your app's state with Pinia for clean, organized code.
- Upgraded to Tailwind CSS v4 for better performance and efficiency.
- Updated class usage to match the latest syntax and features.
- Replaced deprecated class and optimized styles.
- Run npm install or yarn install to update dependencies.
- Check for any style changes or compatibility issues.
- Refer to the Tailwind CSS v4 Migration Guide on this release. if needed.
- This update keeps the project up to date with the latest Tailwind improvements. 🚀
Major update with Vue 3 migration and comprehensive redesign.
- Complete migration to Vue 3 Composition API
- Updated to Vue Router 4
- Enhanced user interface with new Vue 3 components
- Improved performance with Vue 3's virtual DOM
- Better accessibility and responsive design
- Redesigned dashboards (Ecommerce, Analytics, Marketing, CRM)
- Collapsible sidebar with Vue 3 integration
- Enhanced navigation with Vue Router 4
- Real-time chat functionality
- Full-featured calendar with drag-and-drop
- Advanced table components
- Updated data visualization with ApexCharts
- Requires Vue 3 and Vue Router 4
- Chart components migrated to ApexCharts for Vue 3
- Modified routing implementation
- Updated component APIs for Vue 3 compatibility
Read more on this release.
- Fix Mobile Menu Hamburger Icon issue.
- Make it functional [Multiselect Dropdown/Form Elements].
- Delete SelectGroup Components then create a SelectGroup folder and create two files under this folder SelectGroupOne.vue SelectGroupTwo.vue [Select Group/Form Elements & Layout].
- Update style.css file.
- Initial release of TailAdmin Vue.