Where inspiration meets development
A modern, production-ready Vue 3 starter template with glassmorphism design
- Vue 3 with Composition API and
<script setup>syntax - TypeScript for type-safe development
- Vite for lightning-fast HMR and optimized builds
- Pinia for intuitive state management
- Vue Router with type-safe routing and lazy loading
- Glassmorphism UI with multi-layered shadows and backdrop blur
- Light/Dark Theme with seamless switching
- CSS Variables based theming system
- Responsive Design mobile-first approach
- 50+ Reusable Components ready to use
- ESLint + Prettier configured for modern development
- Husky git hooks for code quality
- Feature-based Architecture for scalability
- Comprehensive Documentation for all components
- Type-safe Everything with full TypeScript support
- Optimized Build with Vite's tree-shaking
- Code Splitting for optimal performance
- SEO Friendly with meta tags support
- PWA Ready (optional)
- Deploy Anywhere Vercel, Netlify, or any static host
- Node.js 18+ and npm/pnpm
# Clone the repository
git clone <your-repo-url>
cd muzakit
# Install dependencies
npm install
# or
pnpm install
# Start development server
npm run devOpen http://localhost:3001 to view your app.
muzakit/
├── src/
│ ├── app/ # Application core
│ │ ├── layouts/ # Layout components
│ │ └── router/ # Routing configuration
│ ├── features/ # Feature modules
│ │ ├── auth/ # Authentication feature
│ │ └── theme/ # Theme management
│ ├── pages/ # Page components
│ ├── widgets/ # Complex UI widgets
│ │ ├── sidebar/ # Sidebar widget
│ │ └── table/ # Data table widget
│ ├── shared/ # Shared resources
│ │ ├── ui/ # Reusable UI components
│ │ ├── composables/ # Vue composables
│ │ └── utils/ # Utility functions
│ └── main.ts # Application entry
├── public/ # Static assets
└── docs/ # Documentation
MuzaKit features a modern glassmorphism design system with:
<!-- Basic glass effect -->
<div class="glass">...</div>
<!-- Strong glass (more opaque) -->
<div class="glass-strong">...</div>
<!-- Glass cards -->
<VCard variant="glass">...</VCard>
<VCard variant="glass-elevated">...</VCard>All glass effects automatically adjust for light and dark themes:
- Light Theme: Subtle purple/blue shadows
- Dark Theme: Glowing blue shadows for visibility
Glass effects are conditionally applied:
- Desktop: Full glassmorphism with backdrop blur
- Mobile: Simplified for better performance
- VButton - Versatile button component
- VCard - Card with multiple variants (default, elevated, glass)
- VModal - Accessible modal dialogs
- VInput - Form input with validation
- VTable - Feature-rich data table
- VIcon - Icon component with MDI support
- VToast - Toast notifications
- Sidebar - Collapsible navigation sidebar
- Table - Advanced data table with sorting, filtering, pagination
- Header - Application header with theme toggle
- Theme System - Light/Dark mode with CSS variables
- Authentication - Auth guards and state management example
- Form Validation - Built-in validation utilities
Visit the UI Gallery page in the app to see all components with interactive examples.
# Development
npm run dev # Start dev server
# Build
npm run build # Build for production
npm run preview # Preview production build
# Code Quality
npm run lint # Lint and fix code
npm run lint:check # Check linting only
npm run format # Format with Prettier- Component Storybook
- E2E Testing setup
- More UI components
- CLI for component generation
- Theme builder tool
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - feel free to use this template for your projects!
- 📧 Email: [your-email]
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
Built with ❤️ and inspired by creativity
MuzaKit - Your muse for building beautiful interfaces