DaisyUI
DaisyUI v5 component library built on Tailwind CSS. Semantic component classes, oklch theming system, 35+ built-in themes, and React integration patterns.
| I need to... | Guide | Summary |
|---|---|---|
| Decide whether to use DaisyUI vs raw Tailwind vs shadcn/ui | DaisyUI vs Alternatives | Use DaisyUI when you need multi-theme support or a full design system out of the box. Use raw Tailwind when you need full design control. |
| Install DaisyUI with Tailwind v4 or v3 | Installation and Configuration | Setting up DaisyUI in a new or existing Tailwind project. |
| Implement multi-theme or light/dark mode | Theming System | Use DaisyUI theming for multi-theme support, light/dark mode switching, brand color customization, or white-labeling. The data-theme attribute switches the entire palette with no JavaScript class manipulation required. |
| Understand the CSS variables and color tokens | Color System and Design Tokens | Use this guide when you need to understand which CSS variables control which visual properties, and how to use DaisyUI semantic colors as Tailwind utility classes. |
| Use button, dropdown, modal, or swap | Actions Components | Interactive elements that trigger actions: buttons, dropdowns, modals, and content swap toggles. |
| Use badge, card, alert, stat, or table | Data Display Components | Presenting information: status indicators, grouped content, statistics, tables, and collapsible sections. |
| Use navbar, menu, tabs, or breadcrumbs | Navigation Components | Site navigation, wayfinding, and multi-section navigation patterns. |
| Use input, select, textarea, checkbox, or toggle | Data Input Components | Form elements: text fields, selections, toggles, and form structure. |
| Use drawer, hero, divider, or stack | Layout Components | Page structure, sidebars, overlays, and content arrangement patterns. |
| Extend or override DaisyUI components | Customization Patterns | Extending DaisyUI components with project-specific styles, overriding defaults, and creating custom components that follow DaisyUI conventions. |
| Use DaisyUI in React with CVA | DaisyUI and React | Building React components that use DaisyUI classes, managing variants with CVA, and integrating DaisyUI theming with React patterns. |
| Know best practices and anti-patterns | Best Practices | Code review, architecture decisions, and onboarding guidance for DaisyUI projects. |
| Handle accessibility gaps and ARIA requirements | Security and Accessibility | Every component implementation. Accessibility and security are part of shipping correct code, not optional steps. |
| Review sources and version information | Sources and Maintenance |