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. shadcn provides component code; DaisyUI provides component CSS classes — they solve different problems.
Install DaisyUI with Tailwind v4 or v3	Installation and Configuration	Use @plugin "daisyui" in CSS for Tailwind v4 (not the JS config). Add --default flag on the root theme or no color applies.
Implement multi-theme, light/dark mode, or per-page theme switching	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. All themes must be registered at build time; per-page scoping works by placing data-theme on any container element.
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, table, avatar, chat, timeline, or tooltip	Data Display Components	Presenting information: status indicators, grouped content, statistics, tables, collapsible sections, avatars, chat bubbles, timelines, and tooltips. Add role='alert' to .alert, overflow-x-auto to .table, and explicit dimensions on countdown/skeleton.
Use navbar, menu, tabs, breadcrumbs, dock, or pagination	Navigation Components	Site navigation, wayfinding, and multi-section navigation patterns. Tabs require aria-label on radio inputs. Dock is mobile-only — use lg:hidden. Pagination is composed from .join + .btn.
Use input, select, textarea, checkbox, toggle, file-input, or validator	Data Input Components	Form elements: text fields, selections, toggles, form structure, file pickers, floating labels, and CSS-driven validation display. Replace v4's form-control with fieldset. Use .validator only with native HTML validation attributes.
Use drawer, hero, divider, join, stack, footer, or mask	Layout Components	Page structure, sidebars, overlays, and content arrangement patterns. Use lg:drawer-open + lg:hidden for responsive sidebar. .mask clips visually but leaves box model unchanged.
Use browser, code, phone, or window mockup frames	Mockup Components	Decorative device and UI frames for documentation, marketing, and onboarding screens where the UI itself is the content being shown. Always add border border-base-300 — without it the frame has no visible edge.
Show loading spinners, progress bars, or skeleton placeholders	Feedback Components	Communicating async operation states: loading spinners, linear progress bars, skeleton placeholders, and radial progress indicators. Always add aria-label and role='status' to .loading.
Extend or override DaisyUI components or know when to go custom	Customization Patterns	Extending DaisyUI components with project-specific styles, overriding defaults, and creating custom components. Work through native primitive → composite → custom in order and stop at the first that fits.
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