Repository files navigation

TailAdmin Vue is a free, open-source admin dashboard templatebuilt on Vue.js, popular and progressive JavaScriptframework, andTailwind CSS. Thispowerful combination provides developers with an extensive library ofessential components, elements, and pages to launch a comprehensive and data-centric back-end, dashboard, or admin panelsolution for any Vue.js based web projects.

With TailAdmin Vue, you can leverageVue.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 UIdevelopment 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.x (Vite)
• Tailwind CSS 4.x
• TypeScript

• ✨ Visit Website
• 📄 Documentation
• ⬇️ Download
• 🖌️ Figma Design File (Community Edition)
• ⚡ Get PRO Version

• Free Version
• Pro Version

• HTML Version
• Next.js Version
• React Version
• Angular 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 thetsc CLI withvue-tsc for type checking. In editors, we needVolar 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.git

Windows Users: place the repository near the root of your drive if you face issues while cloning.

1. Install dependencies:

   npm install# oryarn install

2. Start the development server:

   npm run dev# oryarn dev

3. Production build:

   npm run build# oryarn build

• 1 Unique Dashboard
• 50+ Dashboard UI components
• Basic Figma design files
• Community support

• 7 Unique Dashboards: Analytics, Ecommerce, Marketing, CRM, Stocks (more coming soon)
• 500+ dashboard components and UI elements
• Complete Figma design file
• Email support

To learn more about pro version features and pricing, visit ourpricing 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 v4Migration 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 thisfolder SelectGroupOne.vue SelectGroupTwo.vue [Select Group/Form Elements & Layout].
• Update style.css file.

• Initial release of TailAdmin Vue.