Design System Dashboard Devmunity
A professional Nuxt Layer that functions as a design system for building modern dashboard applications with Nuxt. It provides shared components, styles, configurations, and themes that you can extend in your projects.Installation
Get started by installing the design system in your Nuxt project
Quick start
Build your first dashboard in minutes with our quick start guide
Storybook
Explore components in isolation with interactive examples
GitHub
View the source code and contribute to the project
What’s included
This design system provides everything you need to build professional dashboard applications:Layout components
Pre-built layout components for common dashboard patterns:- LDashboardContainer - Complete dashboard layout with sidebar, header, and body
- LSidebar - Responsive sidebar with navigation and logo support
- LNavbar - Top navigation bar with search and user menu
UI components
Reusable components organized by complexity:- Cards -
BCard,DCardHeader,ACardInner - Badges -
BBadge,CBadgeStatus - Buttons -
AButtonNavigation,AButtonAvatarDropdown - Modals -
BModal,CModalDanger - Form elements -
DUploadAvatar - Actions -
DActionButtons - And more…
Theming system
Built on top of Nuxt UI and Tailwind CSS 4 with a comprehensive color system:- Primary, Secondary, Accent colors
- Success, Warning, Error, Info states
- Customizable through
app.config.ts
Icons
Integrated icon collections:- Lucide icons - Modern, clean icon set
- Simple Icons - Brand and logo icons
The component library is currently being migrated from an older version, so you’ll see new components arriving regularly!
Built with
- Nuxt 4 - The Intuitive Vue Framework
- Nuxt UI 4 - Fully styled and customizable components
- Tailwind CSS 4 - Utility-first CSS framework
- TypeScript - Type safety throughout
- Storybook - Component development and documentation
Features
- Nuxt Layer architecture - Extends seamlessly into your projects
- Auto-imported components - No manual imports needed
- TypeScript support - Full type definitions included
- Responsive design - Mobile-first approach
- Theme customization - Easy color and style overrides
- Icon integration - Thousands of icons ready to use
- Semantic versioning - Automated releases with conventional commits