margaui

name: margaui description: Use when writing or editing HTML/JSX that uses margaui or daisyUI component classes — `btn`, `card`, `alert`, `modal`, `navbar`, `dropdown`, `toast`, `badge`, `menu`, `tab`, `drawer`, `hero`, `stat`, `chat`, `timeline`, theme tokens like `bg-base-100`, `text-base-content`, `bg-primary`, `text-primary-content`, or themes set via `data-theme="…"`. margaui is a Tailwind v4-native port API-compatible with daisyUI, so this skill applies to either. Not for vanilla Tailwind code that does not use these classes. Provides per-component usage notes, copy-paste examples, and theme-safe color guidance.

margaui is a Tailwind v4–native CSS component library: 65 components defined as Tailwind v4 @utility classes, plus 35 themes selected via data-theme on any ancestor element.

Relationship to daisyUI

margaui is API-compatible with daisyUI. The class names (btn, btn-primary, card, card-body, alert-info, modal-box, dropdown-content, …), modifier vocabulary, and DOM structure mirror daisyUI. Differences are implementation-level (Tailwind v4 native, in-browser compiler, @supports fallbacks for color-mix), not API-level.

Practical implication: daisyUI documentation and examples are valid references when this skill doesn't cover something. If a component is documented for daisyUI, the same markup works in margaui.

Themes

Set on any element (most often <html> or <body>):

<html data-theme="dracula">

light is the default — applied via :root and :host, so pages work without an explicit data-theme. 35 themes available: abyss, acid, aqua, autumn, black, bumblebee, business, caramellatte, cmyk, coffee, corporate, cupcake, cyberpunk, dark, dim, dracula, emerald, fantasy, forest, garden, halloween, lemonade, light, lofi, luxury, night, nord, pastel, retro, silk, sunset, synthwave, valentine, winter, wireframe.

Conventions across components

Theme-driven colors. Use semantic color utilities (bg-base-100, bg-base-200, text-base-content, text-primary, bg-primary, text-primary-content, etc.) rather than hard-coded palette colors — this keeps components correct across all 35 themes.
Modifier suffixes are consistent. Most components share the same vocabulary: color (-primary, -secondary, -accent, -info, -success, -warning, -error, -neutral, -ghost), style (-outline, -soft, -dash), size (-xs, -sm, -md, -lg, -xl), state (-active, -disabled).
Tailwind utilities work normally. Responsive prefixes (sm:, md:, …), state variants (hover:, focus:, …), and arbitrary values all compose with margaui classes.
@utility classes, not @apply. Internally components are defined with Tailwind v4's @utility directive, so they tree-shake on demand and can be combined freely.

Common mistakes

Don't use palette colors (bg-blue-500, text-red-600, border-gray-300). Use bg-primary, text-error, bg-base-200, border-base-300. Palette colors break across the 35 themes; semantic tokens follow data-theme.
Modal: prefer the native <dialog class="modal"> form with showModal(). The modal-toggle checkbox and anchor-link variants are legacy fallbacks.
Pop-ups: dropdown for menus attached to a trigger, modal for blocking dialogs, toast for non-blocking corner notifications, alert for inline messages.
Pop-up containers need their own surface. dropdown-content, menu inside dropdown, etc. are not styled by default — add bg-base-100, rounded-box, shadow-sm, and z-1 so they render correctly.

Component index

Read the linked file when the user's task involves that component. Each file has What it does, When to use, Core classes, and copy-paste HTML examples drawn from playground/components/<name>/.

accordion — collapsible sections (single-open via radio, free via details). For a single region, use collapse; for switching panels, use tab.
alert — inline notification box (info / success / warning / error). For corner-stacked notifications use toast; for blocking dialogs use modal.
avatar — user picture / placeholder, with optional ring, mask, presence
badge — small label / counter chip
breadcrumbs — path-style navigation trail
button — btn with color / size / shape / style modifiers
calendar — date picker (uses external Cally web component)
card — container with figure, body, title, actions
carousel — horizontal/vertical scroll-snap slideshow
chat — chat bubble (start/end alignment)
checkbox — styled <input type="checkbox">
collapse — single show/hide region (details/summary or checkbox). For multiple stacked sections use accordion.
countdown — animated digit transitions for timers / clocks
diff — side-by-side image/text comparison with draggable handle
divider — horizontal / vertical separator with optional label
dock — bottom navigation bar (mobile-style)
drawer — off-canvas sidebar (toggle via checkbox). For a small attached menu use dropdown; for a blocking dialog use modal.
dropdown — click/hover/focus menu attached to a trigger. For full-screen/blocking dialogs use modal; for nav lists use menu.
fab — floating action button (single or speed-dial)
fieldset — themed <fieldset> group with legend + label slots
file-input — styled file picker
filter — radio-button filter group (with reset)
footer — page footer with column groupings
hero — full-width banner section (centered or with figure)
hover-3d — 3D tilt effect on hover (cards / images)
hover-gallery — swap images by hovering across regions
indicator — wrap an element to overlay a badge / status / button at a corner
input — themed text-style input wrapper
join — group adjacent items so borders/radii merge
kbd — keyboard-key visual
label — input label (inline or floating)
link — themed <a>
list — vertical list with grid-style columns
loading — loading spinner / dots / bars / ring / ball / infinity
mask — clip an element to a shape (circle, hex, star, …)
menu — vertical/horizontal nav list (sidebar, sub-menus)
mockup — chrome wrappers for screenshots: mockup-window, mockup-browser, mockup-phone, mockup-code (terminal / code block)
modal — dialog / pop-up (prefer native <dialog>; checkbox/anchor variants are legacy). For non-blocking notices use toast or alert.
navbar — top navigation bar with start/center/end slots
pagination — paged-navigation button row
progress — linear progress bar (<progress>)
radial-progress — circular progress indicator
radio — styled <input type="radio">
range — styled <input type="range"> slider
rating — star / heart rating (radio inputs + masks)
select — styled <select>
skeleton — shimmering placeholder for loading content
stack — stack children (Z-axis)
stat — KPI / metric tile (title + value + desc)
status — small colored status dot
steps — multi-step progress indicator
swap — toggle between two children (icon swap, hamburger)
tab — tabbed content (radio inputs or anchors). For collapsible stacked sections use accordion.
table — themed <table> (zebra, hover, pinned rows/cols, sizes)
text-rotate — cycle through words in place (CSS animation)
textarea — styled <textarea>
theme-controller — checkbox / radio / dropdown that switches data-theme
timeline — vertical or horizontal event timeline
toast — fixed-position notification stack (corner overlays). For inline messages use alert; for blocking dialogs use modal.
toggle — on/off switch (styled checkbox)
tooltip — hover/focus tooltip on any element
validator — show validation message tied to a form input