daisyui-skilld

name	daisyui-skilld
description	ALWAYS use when writing code importing "daisyui". Consult for debugging, best practices, or modifying daisyui.
metadata	{"version":"5.6.14","generated_by":"Anthropic · Haiku 4.5","generated_at":"2026-07-06T00:00:00.000Z"}

saadeghi/daisyui daisyui@5.6.14

Tags: alpha: 5.6.0-alpha.4, beta: 5.6.0-beta.0, latest: 5.6.14

References: package.json • README • Docs • Issues • Discussions • Releases

Search

Use skilld search "query" -p daisyui instead of grepping .skilld/ directories. Run skilld search --guide -p daisyui for full syntax, filters, and operators.

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases. Note: daisyUI v5.6.x releases are not yet documented in the available release notes. The following changes apply to v5.5.x and earlier, with v5.0.0 containing major breaking changes between v4 and v5.

Breaking changes (v5.0.0 → current)

• BREAKING: artboard and phone-* classes removed — use Tailwind CSS w-* and h-* utilities instead. artboard phone-1 → w-[320px] h-[568px] source

• BREAKING: Avatar class renames — online → avatar-online, offline → avatar-offline, placeholder → avatar-placeholder source

• BREAKING: bottom-nav component removed — use dock component instead; btm-nav-* → dock-* and btm-nav-active → dock-active source

• BREAKING: Button default height reduced and customizable via --size-field. btn-ghost hover behaviour changed — now shows original color on hover instead of forcing primary source

• BREAKING: card-bordered renamed to card-border source

• BREAKING: Chat bubble default color changed from neutral to base-300 — use chat-bubble-neutral to restore old behaviour source

• BREAKING: File input now has border by default; file-input-bordered removed — use file-input-ghost to remove border source

• BREAKING: Input now has default width of 20rem (no need for w-full max-w-xs); input-border and input-bordered removed — use input-ghost source

• BREAKING: Footer is now vertical by default — use footer-horizontal for horizontal layout source

• BREAKING: Menu class renames — disabled → menu-disabled, active → menu-active, focus → menu-focus source

• BREAKING: mask-parallelogram, mask-parallelogram-2, mask-parallelogram-3, and mask-parallelogram-4 removed source

• BREAKING: Select now has default width of 20rem; select-border removed — use select-ghost source

• BREAKING: tabs-lifted renamed to tabs-lift source

• BREAKING: Textarea border always present; textarea-border removed — use textarea-ghost source

• BREAKING: btn-group and input-group components removed source

New components and features

• NEW: hover-3d component — creates 3D card effect on hover source

• NEW: text-rotate component — rotates between multiple words source

• NEW: skeleton-text variant — animated gradient text source

• NEW: dropdown-close modifier — forces dropdown to close source

• NEW: Dropdown support for HTML popover attribute — eliminates overflow and z-index issues source

• NEW: Dropdown support for CSS Anchor positioning (Chromium-only; other browsers fallback to modal positioning) source

• NEW: is-drawer-open and is-drawer-close variants — style elements based on drawer state, enabling icon-only drawer sidebars source

• NEW: Card sizes — card-xs, card-sm, card-md, card-lg, card-xl source

• NEW: Card can be used as radio card — <label class="card"> with checkbox/radio inside shows outline on toggle source

• NEW: Component style variants — alert-outline, alert-dash, alert-soft, badge-dash, badge-soft, btn-dash, btn-soft, card-dash source

• NEW: Extended -xl sizes — button (btn-xl), badge (badge-xl), checkbox (checkbox-xl), and many other components source

• NEW: Countdown dynamic width support — now displays 0 to 999 with adaptive width source

• NEW: Countdown digit animation — animate the 2 digits independently source

• NEW: Scrollbar gutter detection — automatic scrollbar-gutter set when page has vertical scrollbar source

• NEW: tooltip-content class — allows HTML content inside tooltips (optional) source

• NEW: CSS layers for improved specificity — added in v5.3.0 source

• NEW: Modal and <details> improved — modal focuses first focusable element on open; collapse (<details>) has smooth min-height transition source

Also changed: mockup-phone no longer requires artboard class · Diff now uses @starting-style and display instead of visibility · Menu details elements have smooth transitions · Badge/breadcrumb/button styles reworked for new scale · Checkbox/radio print-friendly

Best Practices

• Use semantic color names (primary, secondary, accent, success, warning, error, info, base-*) instead of constant Tailwind CSS colors like bg-white and text-black — semantic names automatically adapt across themes without requiring dark mode overrides for each element source

• Avoid dynamic class name interpolation in templates — Tailwind CSS scans for literal class strings at build time, so btn-{{ type }} won't generate CSS even if it works in dev — use full class names as string values instead or apply a safelist in tailwind.config source

• Use CSS logical properties (start, end, ms, me, ps, pe) instead of directional properties (left, right, ml, mr, pl, pr) to support bidirectional websites without manual RTL overrides — add dir="rtl" to the root element for RTL languages and components adapt automatically source

• Prefer daisyUI component classes for repeated UI patterns over custom Tailwind utilities — use btn, card, modal, alert, menu, input, table etc. instead of assembling utilities manually, because components handle semantic colors, dark mode, and accessibility automatically source

• Combine Headless UI (React/Vue) with daisyUI for interactive components — daisyUI provides unstyled HTML patterns and styling; Headless UI provides JavaScript interactivity and accessibility — use Headless UI's components wrapped with daisyUI class names for production-ready interactive elements source

• Add custom colors through @theme and @plugin "daisyui/theme" blocks to extend the colour palette consistently — define custom color names like --color-primary-muted once in @theme, then use those names in each theme variant, making colors reusable across utilities and ensuring theme switching works correctly source

• Use daisyUI Skill or Blueprint MCP when generating UI with LLMs to ensure consistent component usage — agents trained with daisyUI context generate fewer hardcoded colors, fewer custom CSS blocks, and more recognizable component patterns than agents without that context source

• Set default: true and prefersdark: true (or prefersdark: false) in @plugin "daisyui/theme" blocks to control which theme loads by default and which matches the user's system preference — if a theme block lacks these flags, color overrides won't apply source

• Use Popover API ([popover], :popover-open) for modals, dropdowns, and megamenus in daisyUI 5.6+ — the Popover API offers better accessibility and stack management than older patterns, and daisyUI components now support it natively source

• Use range-vertical modifier on range sliders for touch-friendly vertical input on mobile or desktop layouts where a vertical slider improves UX — the vertical mode respects the same size variants as horizontal range sliders source

• Use tooltip-start, tooltip-center, and tooltip-end alignment modifiers to control tooltip alignment on any axis — apply alignment modifiers alongside direction modifiers like tooltip-top to position tooltips precisely without hardcoding positions source

• Use aria-checked and nested checkbox/radio focus styles on card elements to make selectable pricing, plan, and settings cards keyboard-accessible — apply aria-checked="true" to the card and daisyUI provides focus styling and cursor changes automatically source

• Use [aria-disabled="true"] on buttons when the native disabled attribute cannot be used — daisyUI buttons now style aria-disabled="true" the same way as the disabled attribute, providing a fallback for elements that need disabled styling without HTML attribute restrictions source

• Use native input with visual slots for OTP (one-time password) components — structure as a label containing span placeholders and a single input with inputmode="numeric" and maxlength matching the digit count, letting the input handle all logic while daisyUI provides the visual layout source