Install

Install DaisyUI

You'll need to have DaisyUI installed in your project. If you haven't already, follow the instructions on the DaisyUI website to install DaisyUI.

Install Tailwind CSS

You'll need to have Tailwind CSS installed in your project. If you haven't already, follow the instructions on the Tailwind CSS website to install Tailwind CSS.

Tailwind will need some additional configuration to work with DaisyUI Kit. You'll need a tailwind.config.ts file to tell Tailwind where to find the DaisyUI Kit components.

Configure Tailwind 4.x

Create a tailwind.config.ts file in the root of your project. In the content array add the paths to all the places where you have utility classes. Include the DaisyUI Kit path.

export default {
  darkMode: 'class',
  content: [
    // DaisyUI Kit components
    './node_modules/daisy-ui-kit/app/components/*.{vue,js}',
    // Components in your project
    './app/components/**/*.{vue,js,jsx,mjs,ts,tsx}',
    './app/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}',
    './app/pages/**/*.{vue,js,jsx,mjs,ts,tsx}',
    './app/plugins/**/*.{js,ts,mjs}',
    './app/composables/**/*.{js,ts,mjs}',
    './app/utils/**/*.{js,ts,mjs}',
    './app/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}',
    './app/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}',
    './app/app.config.{js,ts,mjs}',
    './app/spa-loading-template.html',
    './content/**/*.{md,vue}',
  ],
  theme: {
    extend: {},
  },
}

Add the @config directive to your main CSS file and make it point to the tailwind.config.ts file.

@import "tailwindcss";
@config "~/../tailwind.config.ts";
@plugin "daisyui";
@plugin "@tailwindcss/typography";

Configure Tailwind 3.x

Create a tailwind.config.ts file in the root of your project.

export default {
  darkMode: 'class',
  content: {
    files: [
      './app/components/**/*.{vue,js,jsx,mjs,ts,tsx}',
      './app/components-docs/**/*.{vue,js,jsx,mjs,ts,tsx}',
      './app/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}',
      './app/pages/**/*.{vue,js,jsx,mjs,ts,tsx}',
      './app/plugins/**/*.{js,ts,mjs}',
      './app/composables/**/*.{js,ts,mjs}',
      './app/utils/**/*.{js,ts,mjs}',
      './app/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}',
      './app/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}',
      './app/app.config.{js,ts,mjs}',
      './app/app/spa-loading-template.html',
      './content/**/*.{md,vue}',
    ],
  },
  theme: {
    extend: {},
  },
}

Install Daisy UI Kit

First install from npm

pnpm add daisy-ui-kit -D

Manual Imports

You can now import the components directly from the daisy-ui-kit package:

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

<template>
  <Button>Click Me</Button>
</template>

Prefixing Imports

The components are exported using their non-prefixed name. You can use the as keyword to add a prefix during import:

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

<template>
  <DaButton>Click Me</DaButton>
</template>

Nuxt Module

The daisy-ui-kit package ships with a Nuxt module, which supports Nuxt's auto-import. Add daisy-ui-kit/nuxt to your nuxt.config.ts:

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

Prefixing Nuxt Components

The default configuration does not prefix the components. If you'd like to configure a prefix, use the daisy key of the Nuxt config. This example configures the Da prefix:

export default defineNuxtConfig({
  modules: [
    'daisy-ui-kit/nuxt',
  ],
  daisy: {
    prefix: 'Da',
  },
})

With the Da prefix configured, you'll be able to add the prefix to each component in your templates:

<template>
  <DaButton>Click Me</DaButton>
</template>