daisyUI 5
CSS component library for Tailwind CSS 4. Provides semantic class names for common UI components.
CRITICAL: grep references/ for component details before answering.
Install
Requires Tailwind CSS 4. No tailwind.config.js — TW4 uses CSS-only config.
@import 'tailwindcss';
@plugin "daisyui";
npm i -D daisyui@latest
CDN alternative:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
Usage Rules
- Style elements by combining: component class + optional part/style/color/size/modifier classes
- Customize with Tailwind utility classes (e.g.
btn px-10). Use ! suffix for specificity override as last resort
- Only use daisyUI class names or Tailwind CSS utilities — no custom CSS needed
- Use
flex/grid with responsive prefixes for layout
- NEVER add
bg-base-100 text-base-content to body unless necessary
- NEVER use
dark: prefix with daisyUI colors — themes handle dark mode automatically
Class Name Categories
| Category |
Purpose |
Example |
| component |
Required base class |
btn, card |
| part |
Child element within component |
card-body |
| style |
Visual variant |
btn-outline |
| color |
Semantic color |
btn-primary |
| size |
Size variant |
btn-sm, btn-lg |
| behavior |
State modifier |
btn-active |
| placement |
Position |
toast-top |
| direction |
Orientation |
divider-horizontal |
| modifier |
Shape/layout modifier |
btn-circle |
| variant |
Conditional prefix |
is-drawer-open: |
Color System
Semantic Colors
| Color |
Purpose |
primary |
Main brand color |
secondary |
Secondary brand color |
accent |
Accent brand color |
neutral |
Non-saturated UI elements |
base-100/200/300 |
Surface colors (light→dark) |
base-content |
Text on base surfaces |
info |
Informational messages |
success |
Success/safe messages |
warning |
Warning/caution messages |
error |
Error/danger messages |
*-content |
Foreground text for each color |
Color Rules
- Use daisyUI colors (not Tailwind
red-500 etc.) so they adapt to themes
*-content colors provide contrast against their paired color- No
dark: prefix needed — colors change with theme automatically
- Use
base-* for majority of page, primary for important elements
Config
@plugin "daisyui" {
themes:
light --default,
dark --prefersdark;
root: ':root';
include:;
exclude:;
prefix:;
logs: true;
}
Built-in themes: light, dark, cupcake, bumblebee, emerald, corporate, synthwave, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk
Switch themes: data-theme="THEME_NAME" on <html>.
Component Quick Reference
| Component |
Class |
Common Modifiers |
| Button |
btn |
btn-primary btn-outline btn-sm/lg btn-circle |
| Card |
card |
card-body card-title card-border card-side |
| Modal |
modal |
modal-box modal-action modal-open |
| Drawer |
drawer |
drawer-toggle drawer-content drawer-side |
| Navbar |
navbar |
navbar-start navbar-center navbar-end |
| Menu |
menu |
menu-horizontal menu-sm menu-title |
| Tabs |
tabs + tab |
parent tabs-box tabs-border tabs-lift; child tab-active |
| Table |
table |
table-zebra table-pin-rows table-sm |
| Input |
input |
input-primary input-sm |
| Select |
select |
select-primary select-sm |
| Textarea |
textarea |
textarea-primary textarea-sm |
| Badge |
badge |
badge-primary badge-outline badge-sm |
| Alert |
alert |
alert-info alert-success alert-warning |
| Toast |
toast |
toast-top toast-end |
| Loading |
loading |
loading-spinner loading-dots loading-ring |
| Toggle |
toggle |
toggle-primary toggle-sm |
| Tooltip |
tooltip |
tooltip-open tooltip-top/bottom/left/right |
DaisyUI v5 controls already include their base border. Do not use removed v4-style modifiers such as input-bordered, textarea-bordered, select-bordered, tab-bordered, or tab-lifted; they compile to no component rule and hide migration mistakes.
When a behavior library such as Base UI renders a span or button instead of DaisyUI's documented native input, checked styles can still work through aria-checked, but input-specific size modifiers may not change geometry. Pair each supported size with static size-* or h-*/w-* utilities and verify computed dimensions in a real browser. For native <input> wrappers, do not reuse the native size?: number prop for a string variant; use a separate name such as controlSize.
References
references/components.md — All 53 components: class names, HTML syntax, rulesreferences/themes.md — Custom theme creation, CSS variables, OKLCH colors
1---2name: daisyui-v53description: USE THIS SKILL WHEN writing HTML/JSX with daisyUI v5, Tailwind CSS 4 component library. Covers installation, component class names (btn, card, modal, drawer, menu, tab, table, form inputs), color system (primary, secondary, accent, neutral, base, info/success/warning/error), theming with @plugin syntax, config options, and all 53 component APIs with syntax and rules. Triggers on: daisyui, daisyUI, daisy-ui, Tailwind CSS components, btn class, card class.4---56# daisyUI 578CSS component library for Tailwind CSS 4. Provides semantic class names for common UI components.910- [Docs](https://daisyui.com) | [v5 Release Notes](https://daisyui.com/docs/v5/) | [v4→v5 Upgrade](https://daisyui.com/docs/upgrade/)11- Source: [llms.txt](https://daisyui.com/llms.txt) from [saadeghi/daisyui](https://github.com/saadeghi/daisyui)1213CRITICAL: grep `references/` for component details before answering.1415## Install1617Requires **Tailwind CSS 4**. No `tailwind.config.js` — TW4 uses CSS-only config.1819```css20@import 'tailwindcss';21@plugin "daisyui";22```2324```bash25npm i -D daisyui@latest26```2728CDN alternative:2930```html31<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />32<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>33```3435## Usage Rules36371. Style elements by combining: **component** class + optional **part/style/color/size/modifier** classes382. Customize with Tailwind utility classes (e.g. `btn px-10`). Use `!` suffix for specificity override as last resort393. Only use daisyUI class names or Tailwind CSS utilities — no custom CSS needed404. Use `flex`/`grid` with responsive prefixes for layout415. **NEVER** add `bg-base-100 text-base-content` to body unless necessary426. **NEVER** use `dark:` prefix with daisyUI colors — themes handle dark mode automatically4344### Class Name Categories4546| Category | Purpose | Example |47| --------- | ------------------------------ | -------------------- |48| component | Required base class | `btn`, `card` |49| part | Child element within component | `card-body` |50| style | Visual variant | `btn-outline` |51| color | Semantic color | `btn-primary` |52| size | Size variant | `btn-sm`, `btn-lg` |53| behavior | State modifier | `btn-active` |54| placement | Position | `toast-top` |55| direction | Orientation | `divider-horizontal` |56| modifier | Shape/layout modifier | `btn-circle` |57| variant | Conditional prefix | `is-drawer-open:` |5859## Color System6061### Semantic Colors6263| Color | Purpose |64| ------------------ | ------------------------------ |65| `primary` | Main brand color |66| `secondary` | Secondary brand color |67| `accent` | Accent brand color |68| `neutral` | Non-saturated UI elements |69| `base-100/200/300` | Surface colors (light→dark) |70| `base-content` | Text on base surfaces |71| `info` | Informational messages |72| `success` | Success/safe messages |73| `warning` | Warning/caution messages |74| `error` | Error/danger messages |75| `*-content` | Foreground text for each color |7677### Color Rules7879- Use daisyUI colors (not Tailwind `red-500` etc.) so they adapt to themes80- `*-content` colors provide contrast against their paired color81- No `dark:` prefix needed — colors change with theme automatically82- Use `base-*` for majority of page, `primary` for important elements8384## Config8586```css87@plugin "daisyui" {88 themes:89 light --default,90 dark --prefersdark;91 root: ':root';92 include:;93 exclude:;94 prefix:;95 logs: true;96}97```9899Built-in themes: `light`, `dark`, `cupcake`, `bumblebee`, `emerald`, `corporate`, `synthwave`, `retro`, `cyberpunk`, `valentine`, `halloween`, `garden`, `forest`, `aqua`, `lofi`, `pastel`, `fantasy`, `wireframe`, `black`, `luxury`, `dracula`, `cmyk`, `autumn`, `business`, `acid`, `lemonade`, `night`, `coffee`, `winter`, `dim`, `nord`, `sunset`, `caramellatte`, `abyss`, `silk`100101Switch themes: `data-theme="THEME_NAME"` on `<html>`.102103## Component Quick Reference104105| Component | Class | Common Modifiers |106| --------- | -------------- | --------------------------------------------------------------- |107| Button | `btn` | `btn-primary` `btn-outline` `btn-sm/lg` `btn-circle` |108| Card | `card` | `card-body` `card-title` `card-border` `card-side` |109| Modal | `modal` | `modal-box` `modal-action` `modal-open` |110| Drawer | `drawer` | `drawer-toggle` `drawer-content` `drawer-side` |111| Navbar | `navbar` | `navbar-start` `navbar-center` `navbar-end` |112| Menu | `menu` | `menu-horizontal` `menu-sm` `menu-title` |113| Tabs | `tabs` + `tab` | parent `tabs-box` `tabs-border` `tabs-lift`; child `tab-active` |114| Table | `table` | `table-zebra` `table-pin-rows` `table-sm` |115| Input | `input` | `input-primary` `input-sm` |116| Select | `select` | `select-primary` `select-sm` |117| Textarea | `textarea` | `textarea-primary` `textarea-sm` |118| Badge | `badge` | `badge-primary` `badge-outline` `badge-sm` |119| Alert | `alert` | `alert-info` `alert-success` `alert-warning` |120| Toast | `toast` | `toast-top` `toast-end` |121| Loading | `loading` | `loading-spinner` `loading-dots` `loading-ring` |122| Toggle | `toggle` | `toggle-primary` `toggle-sm` |123| Tooltip | `tooltip` | `tooltip-open` `tooltip-top/bottom/left/right` |124125DaisyUI v5 controls already include their base border. Do not use removed v4-style modifiers such as `input-bordered`, `textarea-bordered`, `select-bordered`, `tab-bordered`, or `tab-lifted`; they compile to no component rule and hide migration mistakes.126127When a behavior library such as Base UI renders a `span` or `button` instead of DaisyUI's documented native input, checked styles can still work through `aria-checked`, but input-specific size modifiers may not change geometry. Pair each supported size with static `size-*` or `h-*/w-*` utilities and verify computed dimensions in a real browser. For native `<input>` wrappers, do not reuse the native `size?: number` prop for a string variant; use a separate name such as `controlSize`.128129## References130131- `references/components.md` — All 53 components: class names, HTML syntax, rules132- `references/themes.md` — Custom theme creation, CSS variables, OKLCH colors
wenerme