daisyui

name	daisyui
description	Expert guidance for building accessible, themeable UI components using daisyUI 5 and Tailwind CSS 4. Use this skill whenever the user wants to build web interfaces, dashboards, or components with Tailwind CSS.

daisyui

Expert guidance for using daisyUI 5 with Tailwind CSS 4 to build modern, accessible, and themeable web interfaces.

Core Concepts & Configuration

Fundamental setup and customization for daisyUI projects.

See themes.md for:

• Official theme list and activation
• Customizing themes with @theme blocks
• Light/Dark mode implementation

See base-style.md for:

• Default CSS variables
• Color semantic mapping
• Global component styling

See utilities-variables.md for:

• Layout utilities (Flex/Grid integration)
• Variable overrides
• Performance optimization

See theme-generator.md for:

• Tailwind CSS 4 @theme block generation
• OKLCH color customizing
• Variable-based theme overrides

Actions

Interactive elements for user engagement.

• actions-button.md: Primary, soft, outline, and ghost variants
• actions-dropdown.md: Menu placement, hover, and click triggers
• actions-modal.md: Dialog element integration and accessibility
• actions-speed-dial.md: Floating action buttons with revealed sub-menu
• actions-swap.md: Animated state toggles (icons/text)
• actions-theme-controller.md: Declarative theme switching toggles and radios

Data Display

Displaying information in structured formats.

• data-display-accordion.md: Collapsible content sections
• data-display-avatar.md: User profiles and status indicators
• data-display-badge.md: Small status indicators and counts
• data-display-card.md: Versatile content containers
• data-display-carousel.md: Image and content sliders
• data-display-chat.md: Messaging interface bubbles
• data-display-collapse.md: Simple toggleable visibility
• data-display-countdown.md: Time-based counters
• data-display-diff.md: Side-by-side element comparison
• data-display-hover-3d-card.md: Interactive 3D tilt effects
• data-display-hover-gallery.md: Expanding grid image galleries
• data-display-kbd.md: Keyboard shortcut keys
• data-display-list.md: Semantic rows for settings and contacts
• data-display-stat.md: Numerical data and KPI displays
• data-display-status.md: Standalone and avatar-bound status dots
• data-display-table.md: Tabular data formatting
• data-display-text-rotate.md: Animated sequential text headlines
• data-display-timeline.md: Chronological event lists

Data Input

Collecting user information through forms.

• data-input-calendar.md: Date grid selection and display
• data-input-checkbox.md: Multi-select options
• data-input-fieldset.md: Grouped input containers with legends
• data-input-file.md: Styled file upload inputs
• data-input-filter.md: Toggleable chips for search categories
• data-input-label.md: Semantic spacing for form labels
• data-input-radio.md: Single-select options
• data-input-range.md: Slider inputs for numeric values
• data-input-rating.md: Star and emoji rating systems
• data-input-select.md: Dropdown selection menus
• data-input-text.md: Standard text and email inputs
• data-input-textarea.md: Multi-line text input
• data-input-toggle.md: Binary switch inputs
• data-input-validator.md: Real-time feedback for input criteria

Feedback

Providing status and progress updates to users.

• feedback-alert.md: Critical status messages
• feedback-loading.md: Spinners and indeterminate states
• feedback-progress.md: Determinant progress bars
• feedback-radial.md: Circular progress indicators
• feedback-skeleton.md: Content loading placeholders
• feedback-toast.md: Floating notification messages
• feedback-tooltip.md: Hover-based context info

Navigation

Guiding users through the application.

• navigation-breadcrumbs.md: Path-based navigation
• navigation-bottom-nav.md: Legacy sticky bottom navigation
• navigation-dock.md: Modern sticky bottom navigation (replaces btm-nav)
• navigation-link.md: Styled anchor elements
• navigation-menu.md: List-based navigation menus
• navigation-navbar.md: Main application headers
• navigation-pagination.md: Multi-page navigation controls
• navigation-steps.md: Multi-step process indicators
• navigation-tab.md: Content switching interfaces

Layout

Structural components for page organization.

• layout-artboard.md: Fixed-size mobile screens
• layout-divider.md: Vertical or horizontal separators
• layout-drawer.md: Sidebar navigation overlays
• layout-footer.md: Multi-column page footers
• layout-hero.md: Large attention-grabbing headers
• layout-indicator.md: Floating element badges
• layout-join.md: Grouping adjacent components
• layout-mask.md: Image shaping and cropping
• layout-stack.md: Layered component groupings

Mockup

Presenting content inside simulated UI wrappers.

• mockup-browser.md: Simulated browser window
• mockup-code.md: Styled terminal/editor block
• mockup-phone.md: Simulated mobile device
• mockup-window.md: Simulated OS window