Customize daisyUI components

How to customize daisyUI?

daisyUI components come with many variants necessary for design systems and you won't usually need to customize anything.

But you can still customize components in many ways.

• Let's say, you want to customize this button:

<button class="btn">Button</button>

1. You can use daisyUI utility classes:

<button class="btn btn-primary">One</button>
<button class="btn btn-secondary">Two</button>
<button class="btn btn-accent btn-outline">Three</button>

2. You can use Tailwind's utility classes:

<button class="btn rounded-full">One</button>
<button class="btn rounded-none px-16">Two</button>

3. You can customize components on your CSS file, using Tailwind's @apply directive:

.btn {
  @apply rounded-full;
}

4. You can also:

• Add your own theme.
• Opt out of daisyUI's design decisions, and only use an unstyled (skeleton) version of daisyUI.

Official daisyUI
Figma Library

Available on daisyUI store

More details