| name | margaui |
| description | Use when writing HTML/CSS that uses the margaui component library — Tailwind v4 utility classes like `btn`, `card`, `alert`, `modal`, `navbar`, `dropdown`, `toast`, themes via `data-theme`. margaui is API-compatible with daisyUI, so this skill also applies when working with daisyUI markup. Provides per-component usage notes and copy-paste examples. |
margaui
margaui is a Tailwind v4–native CSS component library: 68 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 and currently tracks daisyUI v5.6.6. 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.- Color modifiers are generated, not hand-written. A component's color variants (
btn-primary, badge-success, alert-info, …) resolve from the theme's 16 semantic colors via Tailwind v4's --value(--color-*), so one definition per component covers every color and tracks the active data-theme.
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)
- alert — inline notification box (info / success / warning / error)
- aura — animated glowing border wrapper (rainbow, holo, dual, silver, gold, glow)
- 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)
- 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)
- dropdown — click/hover/focus menu attached to a trigger
- 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, …)
- megamenu — large horizontal nav bar whose items open big popover panels
- menu — vertical/horizontal nav list (sidebar, sub-menus)
- mockup-browser — browser-window chrome wrapper for screenshots
- mockup-code — terminal/code-block visual
- mockup-phone — phone-frame wrapper for screenshots
- mockup-window — OS-window chrome wrapper for screenshots
- modal — dialog / pop-up (native
<dialog> or checkbox-driven)
- navbar — top navigation bar with start/center/end slots
- otp — one-time-password digit input (2FA / verification codes)
- 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)
- 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)
- toggle — on/off switch (styled checkbox)
- tooltip — hover/focus tooltip on any element
- validator — show validation message tied to a form input
