Theming

daisyUI JSX uses daisyUI v5 under the hood, so every daisyUI theme works out of the box.

Using daisyUI themes

Set the data-theme attribute on your root element:

app.tsx

The full list of built-in themes is at daisyui.com/docs/themes.

This library ships two custom themes (light and dark). Copy them into your globals.css:

globals.css

The docs site previews components in light and dark mode only. When you use the components in your own project, any daisyUI theme will work fine.

Every component accepts a className prop. Pass any Tailwind or daisyUI class directly:

app.tsx

https://daisyui.com/docs/themes

https://daisyui.com

daisyUI JSX uses daisyUI v5 under the hood, so every daisyUI theme works out of the box.

Set the data-theme attribute on your root element:

app.tsx

The full list of built-in themes is at daisyui.com/docs/themes.

This library ships two custom themes (light and dark). Copy them into your globals.css:

globals.css

The docs site previews components in light and dark mode only. When you use the components in your own project, any daisyUI theme will work fine.

Every component accepts a className prop. Pass any Tailwind or daisyUI class directly:

app.tsx

https://daisyui.com/docs/themes

https://daisyui.com