daisy-ui-kit

Vue/Nuxt components for DaisyUI 5.

Install

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

Manual Imports

Import components directly from the package:

<script setup lang="ts">
import { Badge, Button } from 'daisy-ui-kit'
</script>

<template>
  <Button primary>Click Me</Button>
  <Badge accent>New</Badge>
</template>

Nuxt Module

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

// 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., <Button is="a" href="/link">).

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<ToastSettings>, 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