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>
  1. You can use Tailwind's utility classes:
<button class="btn rounded-full">One</button>
<button class="btn rounded-none px-16">Two</button>
  1. You can customize components on your CSS file, using Tailwind's @apply directive:
.btn {
  @apply rounded-full;
}
  1. You can also:
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details