🌼
DaisyUI Kit
BeautifulAccessibleType-safeReactiveModernVue Components
65 DaisyUI components wrapped as Vue components with full TypeScript support, v-model bindings, and slots. pnpm add daisy-ui-kit@pre65
Components
All DaisyUI components
100%
TypeScript
Full type safety
v5
DaisyUI
Latest version
Why DaisyUI Kit? Get the best of both worlds: DaisyUI's beautiful components with Vue's reactivity and type safety.
Type-Safe Props
Full TypeScript support with intelligent autocomplete. Every prop is typed for a better developer experience.v-model Support
Two-way binding out of the box. Connect your components to reactive state with ease.Flexible Slots
Compose complex UIs with named slots. Full control over content and structure.35+ Themes
Switch themes instantly with the Theme Controller. Light, dark, and colorful options included.Accessible
Built on DaisyUI's accessible foundation. Keyboard navigation and ARIA attributes included.Nuxt Ready
Install as a Nuxt module for automatic component registration and tree-shaking.Tree Shakeable
Only import what you use. Optimized bundle size with automatic dead code elimination.Well Documented
Comprehensive documentation with live examples for every component and prop.Zero Config
Works out of the box. No complex setup required - just install and start building.SSR Ready
Full server-side rendering support. Works seamlessly with Nuxt SSR and static generation.Always Updated
Stays in sync with the latest DaisyUI releases. New components added as they ship.Lightweight
Minimal overhead on top of DaisyUI. Components add functionality without bloat.Hot Module Reload
Instant updates during development. See changes without losing state.DevTools Integration
Works with Vue DevTools for easy debugging and state inspection.IntelliSense Ready
Rich editor support with prop hints, descriptions, and type checking.Composable Utilities
Helpful composables like useDrawerState, useTheme included.Event Handling
Consistent event patterns across all components with TypeScript support.Responsive by Default
Components adapt to screen sizes using DaisyUI's responsive utilities.Form Library Compatible
Works seamlessly with VeeValidate, FormKit, and native form handling.Router Ready
Components support NuxtLink/RouterLink via the is prop.i18n Friendly
Easy to localize with slot-based content architecture.Battle Tested
Used in production applications. Stable and reliable.Semantic HTML
Proper HTML elements for better SEO and accessibility.Keyboard Navigation
Full keyboard support inherited from DaisyUI.Lazy Loading
Components can be lazy-loaded for optimal bundle splitting.No Runtime CSS
All styles come from Tailwind/DaisyUI. No CSS-in-JS overhead.Copy/Paste Friendly
Examples designed to copy directly into your project with minimal changes.Consistent API
Predictable prop and event patterns across all components.Slot Props
Components expose useful state via slot props for maximum flexibility.Default Slot Support
Most components accept content via the default slot for intuitive usage.Boolean Props
Use shorthand boolean props like <Button primary> instead of :primary="true".Compound Components
Related components work together: Card + CardBody, Modal + ModalBox, etc.Try It Out Interactive components that just work. Click, toggle, and explore.
Buttons
Modal
Hello from Modal!This modal is controlled with v-model. Click outside or press ESC to close.
Swap
Night
Rating
You rated: 3 starsDropdown
Loading
Ready to build something beautiful? Join developers using DaisyUI Kit to create stunning Vue applications faster.