Install

Install the package

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 with Nuxt

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>