daisy-ui-kit

Vue/Nuxt components for DaisyUI 5.

Install

``bash
pnpm add daisy-ui-kit daisyui @vueuse/core
`

Manual Imports

Import components directly from the package:

`vue



`

Nuxt Module

For Nuxt projects with auto-imports, add the module to your config:

`ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['daisy-ui-kit/nuxt'],
})
`

Usage Tips

- Prefer shorthand boolean props like lg and primary over size="lg" and color="primary", unless dynamically bound.
- Write prop names in kebab-case in templates.
- Use component props first, then TailwindCSS classes for anything not covered.
- Use v-model for two-way binding on components with model-value prop and update:model-value event.
- The is prop changes the rendered element (e.g., ).

Component API Reference

`
Accordion
Accordion: props(model-value:string|number) slots(default) events(update:model-value)
Collapse: props(variant:string, arrow:boolean, plus:boolean, open:boolean, close:boolean, toggle:boolean, value:any) slots(default)
CollapseTitle: slots(default)
CollapseContent: slots(default)

Alert
Alert: props(outline:boolean, dash:boolean, soft:boolean, type:string, info:boolean, success:boolean, warning:boolean, error:boolean, orientation:string, vertical:boolean, horizontal:boolean) slots(default)

Avatar
Avatar: props(presence:string, online:boolean, offline:boolean, background-color:string, mask-classes:string, shape:string, squircle:boolean, heart:boolean, hexagon:boolean, hexagon-2:boolean, decagon:boolean, pentagon:boolean, diamond:boolean, square:boolean, circle:boolean, star:boolean, star-2:boolean, triangle:boolean, triangle-2:boolean, triangle-3:boolean, triangle-4:boolean, half-1:boolean, half-2:boolean) slots(default)
AvatarGroup: props(orientation:string, horizontal:boolean, vertical:boolean) slots(default)

Badge
Badge: props(ghost:boolean, outline:boolean, dash:boolean, soft:boolean, invert:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)

Breadcrumbs
Breadcrumbs: slots(default)
Crumb: slots(default)

Button
Button: props(is:string, type:string, join:boolean, ghost:boolean, link:boolean, glass:boolean, outline:boolean, dash:boolean, soft:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, active:boolean, disabled:boolean, no-animation:boolean, shape:string, circle:boolean, square:boolean, wide:boolean, block:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)

Calendar
Calendar: props(model-value:Date|string|null, options:CalendarOptions, aria-label:string, format:string, format-strict:boolean, to-string:function, parse:function, default-date:Date, set-default-date:boolean, first-day:number, min-date:Date, max-date:Date, disable-weekends:boolean, disable-day-fn:function, year-range:number|[number,number], show-week-number:boolean, pick-whole-week:boolean, is-rtl:boolean, i18n:object, year-suffix:string, show-month-after-year:boolean, show-days-in-next-and-previous-months:boolean, enable-selection-days-in-next-and-previous-months:boolean, number-of-months:number, events:array, auto-default:boolean) slots(default) events(update:model-value, update:input-value)
CalendarInput: props(model-value:Date|string|number|null, options:CalendarOptions, bound:boolean, position:string, reposition:boolean, auto-default:boolean, placeholder:string, disabled:boolean, validator:boolean, join:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, ghost:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(update:model-value, update:input-value)
CalendarSkeleton: props(number-of-months:number, date:Date, first-day:number)

Card
Card: props(is:string|object|function, border:boolean, dash:boolean, side:boolean, image-full:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
CardBody: props(is:string) slots(default)
CardTitle: props(is:string) slots(default)
CardActions: props(is:string) slots(default)

Carousel
Carousel: props(snap-to:string, center:boolean, end:boolean, orientation:string, vertical:boolean, horizontal:boolean) slots(default)
CarouselItem: slots(default)

Chat
Chat: props(pre:boolean, align:string, start:boolean, end:boolean) slots(default)
ChatBubble: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean) slots(default)
ChatImage: slots(default)
ChatHeader: slots(default)
ChatFooter: slots(default)

Checkbox
Checkbox: props(model-value:any, theme-controller:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(update:model-value)

Countdown
Countdown: props(is:string|Component) slots(default)
Counter: props(value:number, is:string|Component, digits:2|3)
CountdownTimers: props(duration-in-seconds:number, until-date:Date) slots(default) events(done)

Diff
Diff: slots(one, two)

Divider
Divider: props(orientation:string, horizontal:boolean, vertical:boolean, align:string, center:boolean, start:boolean, end:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean) slots(default)

Dock
Dock: props(size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default)
DockItem: props(active:boolean) slots(default)
DockLabel: slots(default)

Drawer
Drawer: props(open:boolean, name:string, end:boolean) slots(default) events(update:open)
DrawerContent: props(name:string) slots(default)
DrawerSide: props(name:string) slots(default)

Dropdown
Dropdown: props(open:boolean, placement:string, auto-focus:boolean, hover:boolean, delay-enter:number, delay-leave:number, close-on-click-outside:boolean) slots(default) events(update:open)
DropdownButton: slots(default)
DropdownTarget: slots(default)
DropdownContent: slots(default)

Fab
Fab: props(flower:boolean) slots(default)
FabTrigger: slots(default)
FabClose: slots(default)
FabMainAction: slots(default)

Fieldset
Fieldset: props(is:string, legend:string) slots(default, legend)

FileInput
FileInput: props(join:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, ghost:boolean, disabled:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(files)

Filter
Filter: props(is:string, name:string, items:array, model-value:any, reset-label:string, position:string, start:boolean, end:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:model-value)

Flex
Flex: props(is:string|object, join:boolean, flex:boolean, flex-1:boolean, flex-auto:boolean, flex-initial:boolean, none:boolean, direction:string, row:boolean, col:boolean, reverse:boolean, wrap:boolean, nowrap:boolean, wrap-reverse:boolean, grow:boolean, justify:string, justify-start:boolean, justify-end:boolean, justify-center:boolean, justify-between:boolean, justify-around:boolean, justify-evenly:boolean, items:string, items-start:boolean, items-end:boolean, items-center:boolean, items-baseline:boolean, items-stretch:boolean) slots(default)
FlexItem: props(is:any, join:boolean, flex:boolean, flex-1:boolean, flex-auto:boolean, flex-initial:boolean, none:boolean, grow:boolean, direction:string, row:boolean, col:boolean, reverse:boolean, wrap:boolean, nowrap:boolean, wrap-reverse:boolean) slots(default)

Footer
Footer: props(center:boolean, is:string, orientation:string, horizontal:boolean, vertical:boolean) slots(default)
FooterTitle: props(is:string) slots(default)

FormControl
FormControl: slots(default)

Hero
Hero: props(is:string) slots(default)
HeroContent: props(is:string) slots(default)
HeroOverlay: slots(default)

Hover3D
Hover3D: props(is:string|Component, disabled:boolean) slots(default)

HoverGallery
HoverGallery: props(is:string|Component) slots(default)

Indicator
Indicator: props(is:string) slots(default)
IndicatorItem: props(is:string, align:string, start:boolean, center:boolean, end:boolean, v-align:string, top:boolean, middle:boolean, bottom:boolean) slots(default)

Input
Input: props(model-value:string|number|null, type:string, placeholder:string, disabled:boolean, validator:boolean, color:string, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, join:boolean, ghost:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:model-value)

Join
Join: props(vertical:boolean) slots(default)

Kbd
Kbd: props(size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)

Label
Label: props(is:string, floating:boolean, input:boolean, select:boolean, toggle:boolean, join:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, ghost:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)

Link
Link: props(is:string, hover:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, info:boolean, warning:boolean, error:boolean) slots(default)

List
List: slots(default)
ListRow: slots(default)
ListColGrow: slots(default)
ListColWrap: slots(default)

Loading
LoadingSpinner: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
LoadingDots: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
LoadingRing: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
LoadingBall: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
LoadingBars: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)
LoadingInfinity: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean)

Mask
Mask: props(shape:string, squircle:boolean, heart:boolean, hexagon:boolean, hexagon-2:boolean, decagon:boolean, pentagon:boolean, diamond:boolean, square:boolean, circle:boolean, star:boolean, star-2:boolean, triangle:boolean, triangle-2:boolean, triangle-3:boolean, triangle-4:boolean, half-1:boolean, half-2:boolean) slots(default)

Menu
Menu: props(align:string, vertical:boolean, horizontal:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default)
MenuItem: props(active:boolean, disabled:boolean) slots(default)
MenuTitle: slots(default)
MenuExpand: props(open:boolean, hover:boolean, delay-enter:number, delay-leave:number, close-on-click-outside:boolean) slots(default) events(update:open)
MenuExpandToggle: slots(default)

Modal
Modal: props(model-value:boolean, close-on-click-outside:boolean, placement:string, top:boolean, bottom:boolean, start:boolean, end:boolean) slots(default)
ModalBox: slots(default)
ModalAction: slots(default)

MockupBrowser
MockupBrowser: slots(default)
MockupBrowserToolbar: slots(default)

MockupCode
MockupCode: slots(default)

MockupPhone
MockupPhone: slots(default)

MockupWindow
MockupWindow: slots(default)

Navbar
Navbar: props(is:any, glass:boolean) slots(default)
NavbarStart: props(is:any) slots(default)
NavbarCenter: props(is:any) slots(default)
NavbarEnd: props(is:any) slots(default)
NavButton: props(active:boolean, disabled:boolean) slots(default)

Pagination
Pagination: props(model-value:number, total:number, per-page:number, max-visible:number, join:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:model-value)

Progress
Progress: props(value:number, max:number, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, info:boolean, warning:boolean, error:boolean)

Prose
Prose: props(class:string) slots(default)

RadialProgress
RadialProgress: props(value:number|string, size:string, thickness:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean) slots(default)

Radio
Radio: props(model-value:any, value:any, disabled:boolean, theme-controller:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) events(update:model-value)
RadioGroup: props(model-value:any, name:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default) events(update:model-value)

Range
Range: props(model-value:number|string, min:number|string, max:number|string, step:number|string, disabled:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) events(update:model-value)
RangeMeasure: props(model-value:number|string, min:number|string, max:number|string, step:number|string, numbered:boolean, as-buttons:boolean, disabled:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, warning:boolean, info:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default) events(update:model-value)
RangeMeasureTick: props(tick:number, model-value:number|string, numbered:boolean, as-button:boolean, is-hidden:boolean, disabled:boolean) slots(default) events(update:model-value)

Rating
Rating: props(model-value:number|string, count:number|string, half:boolean, disabled:boolean, bg:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, shape:string, squircle:boolean, heart:boolean, hexagon:boolean, hexagon-2:boolean, decagon:boolean, pentagon:boolean, diamond:boolean, square:boolean, circle:boolean, star:boolean, star-2:boolean, triangle:boolean, triangle-2:boolean, triangle-3:boolean, triangle-4:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) events(update:model-value)

Select
Select: props(model-value:any, options:Array, value:function, label:function, result-as-object:boolean, join:boolean, ghost:boolean, disabled:boolean, native:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean, validator:boolean) events(update:model-value)

Skeleton
Skeleton: slots(default)
SkeletonText: props(is:string|Component) slots(default)

Stack
Stack: props(is:string) slots(default)

Stat
Stats: slots(default)
Stat: props(orientation:string, vertical:boolean, horizontal:boolean) slots(default)
StatTitle: slots(default)
StatValue: slots(default)
StatDesc: slots(default)
StatFigure: slots(default)
StatActions: slots(default)

Status
Status: props(color:string, neutral:boolean, primary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default)

Steps
Steps: props(orientation:string, vertical:boolean, horizontal:boolean) slots(default)
Step: props(glyph:string, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean) slots(default)
StepIcon: slots(default)

Swap
Swap: props(model-value:boolean|null, rotate:boolean, flip:boolean) slots(default, swap, indeterminate)

Table
Table: props(zebra:boolean, pin-rows:boolean, pin-cols:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) slots(default)

Tabs
Tabs: props(name:string, current-tab:string, variant:string, box:boolean, border:boolean, lift:boolean, placement:string, top:boolean, bottom:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean) slots(default) events(update:current-tab)
Tab: props(is:any, name:string, active:boolean, disabled:boolean) slots(default)
TabContent: props(is:any, name:string) slots(default)

Text
Text: props(is:string, join:boolean, block:boolean, inline:boolean, inline-block:boolean, label:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, neutral-content:boolean, primary-content:boolean, secondary-content:boolean, accent-content:boolean, info-content:boolean, success-content:boolean, warning-content:boolean, error-content:boolean, size:string, xl:boolean, lg:boolean, sm:boolean, xs:boolean, align:string, left:boolean, center:boolean, right:boolean, justify:boolean, case:string, uppercase:boolean, lowercase:boolean, capitalize:boolean, normal-case:boolean, font:string, sans:boolean, serif:boolean, mono:boolean, weight:string, thin:boolean, extralight:boolean, light:boolean, normal:boolean, medium:boolean, semibold:boolean, bold:boolean, extrabold:boolean, black:boolean) slots(default)

TextArea
TextArea: props(model-value:string, placeholder:string, type:string, rows:number, auto-expand:boolean, ghost:boolean, disabled:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, size:string, xl:boolean, lg:boolean, md:boolean, sm:boolean, xs:boolean, validator:boolean) events(update:model-value)

TextRotate
TextRotate: props(is:string|Component, center:boolean, duration:number) slots(default)

ThemeController
ThemeController: props(themes:DaisyThemeInput[], default-theme:string, storage:Function) slots(default)
ThemeTile: props(theme:string, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean)

ThemeProvider
ThemeProvider: props(data-theme:string, css-vars:string, snoop:boolean) slots(default)

Timeline
Timeline: props(vertical:boolean, horizontal:boolean, compact:boolean, snap-icon:boolean, class:string) slots(default)
TimelineItem: props(hr:boolean, class:string) slots(start, middle, end, hr-top, hr-bottom)
TimelineStart: props(box:boolean, class:string) slots(default)
TimelineMiddle: props(class:string) slots(default)
TimelineEnd: props(box:boolean, class:string) slots(default)
TimelineLine: props(color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean)

Toast
Toast: props(h-align:string, start:boolean, center:boolean, end:boolean, v-align:string, top:boolean, middle:boolean, bottom:boolean, name:string, defaults:Partial, limit:number) slots(default)

Toggle
Toggle: props(model-value:any, disabled:boolean, validator:boolean, theme-controller:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, success:boolean, info:boolean, warning:boolean, error:boolean, size:string, xs:boolean, sm:boolean, md:boolean, lg:boolean, xl:boolean) events(update:model-value)

Tooltip
Tooltip: props(tip:string|number, open:boolean, color:string, neutral:boolean, primary:boolean, secondary:boolean, accent:boolean, info:boolean, success:boolean, warning:boolean, error:boolean, position:string, top:boolean, right:boolean, bottom:boolean, left:boolean, delay-enter:number, delay-leave:number) slots(default)
TooltipTarget: slots(default)
TooltipContent: slots(default)

Validator
ValidatorHint: slots(default)
``

License

MIT