Material Dashboard Shadcn Vue

🚀 Material Dashboard Shadcn Vue (by Creative Tim)

A modern CRM template for Vue developers

Kickstart your next CRM or admin project with this open-source template built using Vue 3, Vite, TypeScript, Tailwind CSS, and shadcn-vue components. Designed with a clean, minimalistic interface, it provides developers with a professional foundation for scalable applications.

Whether you're building a CRM, SaaS backend, or internal tool, this dashboard offers a solid architecture and beautiful design system from day one.

📖 Overview

• Template Name: Material Dashboard Shadcn Vue
  
• Created: October 1, 2025
  
• Tech Stack: Vue 3, Vite, TypeScript, shadcn-vue, Tailwind CSS
  
• Purpose: Developer-ready CRM template with 7 fully implemented pages
  

🎯 Pages Included

This template comes with 7 complete, production-ready pages (with live preview links):

• Dashboard — Overview with key metrics and recent activity
  
• Billing — Subscription & payment management
  
• Contacts — Contact management with search functionality
  
• Deals / Pipeline — Kanban-style deal tracking
  
• Tasks — Task management with status tracking
  
• Reports — Analytics and performance metrics
  
• Settings — User preferences and configuration
  

🏗️ Architecture

• Framework: Vue 3 with Composition API
  
• Build Tool: Vite (fast HMR + optimized builds)
  
• Styling: Tailwind CSS + shadcn-vue design system
  
• Routing: Vue Router with lazy-loaded routes
  
• Type Safety: TypeScript throughout
  
• Charts: Chart.js with vue-chartjs for interactive visualization
  

Project Structure:

This structure organizes the Shadcn + Vue dashboard for clarity and scalability:

• components/ → shared UI elements
  
• views/ → page-level components
  
• layouts/ → main layout wrappers
  
• lib/ → composables and utilities
  
• router/ → routes and navigation
  

🌟 Key Features

• Responsive sidebar navigation with icons
  
• Clean, minimalistic design with consistent spacing
  
• Card-based layouts for content organization
  
• Tailwind CSS utility classes for styling
  
• TypeScript for type safety
  
• Fast Hot Module Replacement (HMR) with Vite
  

⚙️ Development

• Dev Server: npm run dev (runs on port 5000)
  
• Build: npm run build
  
• Preview: npm run preview
  

🎨 Customization

This template is built for easy customization:

• Modify color scheme in src/assets/index.css
  
• Add new pages in src/views/ and update router
  
• Create custom UI components in src/components/
  
• Extend functionality with Pinia for state management if needed
  

📚 Documentation

Full installation and customization guide is available in INSTALLATION.md.

🔗 Helpful Links

• 🛠️ GitHub Repository
  
• 🌐 Product Page
  
• 🚀 Live Preview
  

✅ Current State

• All 7 pages implemented and functional
  
• Sidebar navigation working
  
• Minimalistic design with shadcn-vue components
  
• Fully responsive layout
  
• TypeScript + Vite configuration ready
  
• Documentation complete
  

⚡ Ready to build stunning CRM systems, admin panels, or SaaS dashboards?
This freebie is your launchpad to save development hours while delivering professional-grade design.