Select your framework:
You'll need DaisyUI installed in your project. Follow the instructions on the DaisyUI website.
You'll need Tailwind CSS installed in your project. Follow the instructions on the Tailwind CSS website.
Add DaisyUI and configure themes in your main CSS file:
Use the @source directive to include DaisyUI Kit components in Tailwind's content detection. The themes option is a comma-separated list of theme names. Use --default to set the default theme and --prefersdark for the dark mode theme.
Install the Vue package from npm:
Import components from the package and use them in your Vue project:
For Nuxt projects, DaisyUI Kit ships with a Nuxt module that enables auto-imports. Install the main package instead:
Then add it to your nuxt.config.ts:
All components and composables are then available without imports.
To add a prefix to all component names, use the daisy config key:
With the Da prefix, components are available as <DaButton>, <DaBadge>, etc.
Components are exported using their non-prefixed name. Use the as keyword to add a prefix during import: