color × appearance (solid / outline / soft / base-100 / base-200 / base-300 / ghost / link) — all 8 colors

Bundle buttons/links as a segmented control. Wrapper auto-zeros border-radius on the center child and collapses shared borders. Hover fills with soft tint on the wrapper, keeping the group visually light (improved v0.3.3). Orientation: horizontal (default) or vertical. No need to add class="join-item" to children (removed v0.3.3).

color × appearance (solid / outline / soft / base-100 / base-200 / base-300 / dot)

appearance = default / elevated / filled / base-100 / base-200 / base-300 / outline / soft / solid / bordered-top / ghost — toggle divider

initials / icon / image + size × shape × status indicator

Stack avatars into a facepile using daisyUI 5 avatar-group class. For project members, attendees, or assignees lists. Nest <x-avatar> in a slot. Spacing controls overlap (tight / normal / loose).

color × appearance (outline / soft / underline / ghost) — prefix/suffix, icon, floating label, append slot support

Fake checkbox (peer + sr-only) — color × appearance (solid / soft / base-100 / base-200 / base-300) × size

Fake radio (peer + sr-only) — color × appearance (solid / soft / base-100 / base-200 / base-300) × size, with radio-group

Switch (peer + sr-only, role="switch") — color × appearance (solid / soft) × size, optional ON/OFF state labels. solid fills the rail; soft inverts and fills the thumb.

full (numbered) / simple (prev-current/total-next) — color × appearance × size, Laravel paginator compatible

daisyUI progress bar wrapper. value=null for indeterminate (animated stripe); set value for determinate. color × size × showLabel (percent / fraction) via props. a11y: role=progressbar + aria-valuenow/valuemin/valuemax.

Content loading placeholder wrapping daisyUI skeleton class. shape (rect / circle / text), width, height, radius, animated via props. width/height are Tailwind class names (w-32, h-4, etc.).

Loading indicator wrapping daisyUI 5 loading class. variant (spinner/dots/ring/bars/ball/infinity) × size (xs–xl) × color (8 colors) cover every "wait" scenario: inside buttons, full-page, cards, etc.

Inline keyboard shortcut chip wrapping HTML5 <kbd> with daisyUI 5 kbd class. Two props: size and appearance. Embed in prose or chain with + to show combos.

No-JS pure CSS hover tip wrapping daisyUI 5 tooltip class. Put trigger in a slot, pass body via text prop. position (top/right/bottom/left), color (light default + 8 variants including neutral), open (always-on). A11y: title attribute on trigger for screen readers.

Wrap daisyUI 5 indicator class to overlay a badge or dot at a corner. position (9 combos: top/middle/bottom × start/center/end), dot (bool; true = plain dot, no text), color (8 colors, default=error), appearance (solid default / soft / outline / ghost / dash). Default is solid (dark fill) for strong "has notification" signal; soft is opt-in. Slot $badge for the badge, $slot for the element beneath.

Hierarchy navigation wrapping daisyUI 5 breadcrumbs class. Dual API: pass items array or write <ul> with <li> yourself. Omit url on the last item to skip linking the current page. Separator: chevron (default) or slash. Sizes: sm / md / lg.

Single KPI / metric display. label / value / desc plus valueColor / trend / trendValue control color and direction arrows. For multiple stats, set wrapped=false and wrap them in <x-stat-group>.

Section divider wrapping daisyUI 5 divider class. Bare <x-divider> for a line; add text in a slot for a label. direction=vertical makes it a vertical line inside flex.

daisyUI 5 rating (mask + radio) wrapper. star / heart / circle shapes, half-star support (half=true), readonly. Ensure unique name per demo to keep radio groups separate.

Wrapped daisyUI 5 range class. <input type="range"> + chrome (label, value display, hint, error state). 8 colors × 5 sizes, min/max/step, showValue (Alpine live display), error state. Works as both form input and pure visual slider.

Quantity selector — [−] [input] [＋] in a joined border. min/max/step enforced by HTML attributes and Alpine clamping; ± buttons auto-disable at bounds. Native spinner arrows hidden. Decimal step (e.g. 0.5) supported.

Join any form elements horizontally (select+input, input+button, input+input, etc.). x-input prefix/suffix/append are for single-input combos; use this for multiple equal-weight form elements. Use the $c['addon'] helper class to vertically align text decorators to addon height.

OTP / auth code input — N single-char boxes with auto-advance, backspace-back, arrow nav, paste-to-fill. autocomplete="one-time-code" on the first box (shows SMS codes on iOS/Android). numeric (default) / alphanumeric. Props: length, size, masked, autofocus. Combined value posted via hidden input.

Time-series list wrapping daisyUI 5 timeline class. Pass items array. orientation (vertical/horizontal), compact (one-side align), snap (icons snap top), appearance (solid default / soft) modifiers. Add state=done|current|upcoming to items for icon and connector color changes. solid (default) makes done chain prominent; appearance="soft" is opt-in for a gentler look.

Visualize multi-step process (sign-up flow, checkout, wizard). Pass items array; set state=done|current|upcoming on each. orientation (horizontal default / vertical), variant (numbered default / dotted). timeline is for append-only history; stepper is for bounded sequential progress.

8 appearances × semantic colors, dismissible support

color × appearance (outline / soft / underline / ghost) — rows, autoresize, character counter, label/hint/error

Native select — color × appearance, sizes, optgroup, multiple, floating label

Native <input type="file"> + file:* inline utilities and dashed dropzone (large area). Multi-file with progress bar driven by Alpine—simulation flags make the demo self-running.

Place once per page; dispatch notify event from any Alpine component with { type, content } payload. position / appearance / size / duration / event-name are configurable props.

Normal table + x-table-scroll wrapper adds left/right scroll buttons and gradient fades when overflow. Wrapper stays transparent (adds nothing) when content fits. Not table-only; works with card lists, image strips, etc.

Alpine-driven generic dropdown. Swap trigger via slot, or use label prop for a simple button. position (bottom-end default / bottom-start / top-end / top-start), size (sm/md/lg), width (any Tailwind w-* class). Fill the menu slot with links, buttons, or anything.

Panel floats next to trigger on click (or hover). Sits between dropdown and tooltip — holds any content (info card, mini form, confirm prompt). 4 placements (top/right/bottom/left) via CSS (no collision detection), optional arrow. trigger="click" (default) / "hover". Alpine-driven, closes on Escape or outside click.

Alpine x-data overlay dialog. Click the trigger slot to open, or dispatch open-modal-{id} from elsewhere. size (sm/md/lg/xl/full), title, showClose, closeOnBackdrop props. Close via background click, Escape, or × button. x-trap for focus trap, x-teleport to append below body.

Tab-switched content. Changed to nested syntax in v0.4.0 (naturally pass Blade slots without XSS). Nest <x-tab name="..." label="...">content</x-tab> inside <x-tabs>. variant: underline (default) / boxed / pill. size: sm / md / lg. Set default active name (first tab if omitted). Alpine x-data tracks client-side active state.

Disclosure list. Changed to nested syntax in v0.4.0 (naturally pass Blade slots without XSS). Nest <x-accordion-item title="...">content</x-accordion-item> inside <x-accordion>. Single-open or multiple-open, 3 sizes. Content is a Blade slot, so any Blade markup, components, or links work. Alpine x-collapse animates smoothly.

Wrapped daisyUI 5 collapse class for a single toggle block (no-JS, checkbox-driven). Pass header via title prop or slot:title, body via $slot. Icons: null (default) / arrow / plus. Props: bordered (default true), open (initial state). Minimal by default; icon is opt-in. Stack multiple for FAQ.

Drawer component rendered via x-teleport below body. Click trigger slot to open; Escape / × / background click closes. side (left/right), size (sm/md/lg), backdrop are the 3 axes. Focus trap (x-trap.inert.noscroll) and role=dialog/aria-modal=true for a11y. backdrop=false runs pointer-events-none on the overlay and pointer-events-auto on the panel, so you can inspect or interact with the page behind (persistent inspector, tool palette).