Component Catalog
46 UI components. Static ones run on Tailwind + daisyUI alone; dynamic ones layer in Alpine.js for interactive behaviour. Tap any card to open the component's own page.
pinion-ui
· Static — Tailwind + daisyUI only 27Button
color × appearance (solid / outline / soft / base-100 / base-200 / base-300 / ghost / link) — all 8 colors
/buttonButton Group
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).
/button-groupBadge
color × appearance (solid / outline / soft / base-100 / base-200 / base-300 / dot)
/badgeCard
appearance = default / elevated / filled / base-100 / base-200 / base-300 / outline / soft / solid / bordered-top / ghost — toggle divider
/cardAvatar
initials / icon / image + size × shape × status indicator
/avatarAvatar Group
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).
/avatar-groupInput
color × appearance (outline / soft / underline / ghost) — prefix/suffix, icon, floating label, append slot support
/inputCheckbox
Fake checkbox (peer + sr-only) — color × appearance (solid / soft / base-100 / base-200 / base-300) × size
/checkboxRadio
Fake radio (peer + sr-only) — color × appearance (solid / soft / base-100 / base-200 / base-300) × size, with radio-group
/radioToggle
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.
/togglePagination
full (numbered) / simple (prev-current/total-next) — color × appearance × size, Laravel paginator compatible
/paginationProgress
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.
/progressSkeleton
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.).
/skeletonSpinner
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.
/spinnerKbd
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.
/kbdTooltip
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.
/tooltipIndicator
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.
/indicatorBreadcrumb
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.
/breadcrumbStat
Single KPI / metric display wrapping daisyUI stats + stat class. label / value / desc plus valueColor / trend / trendValue control color and direction arrows. For multiple stats, set wrapped=false and nest in <div class="stats"> yourself.
/statDivider
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.
/dividerRating
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.
/ratingRange Slider
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.
/range-sliderInput Number
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.
/input-numberInput Group
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.
/input-groupPin Input
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.
/pin-inputTimeline
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.
/timelineStepper
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.
/stepperpinion-ui
· Dynamic — Alpine.js driven Alpine 13Alert
8 appearances × semantic colors, dismissible support
/alertTextarea
color × appearance (outline / soft / underline / ghost) — rows, autoresize, character counter, label/hint/error
/textareaSelect
Native select — color × appearance, sizes, optgroup, multiple, floating label
/selectFile Upload
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.
/file-uploadNotification
Place once per page; dispatch notify event from any Alpine component with { type, content } payload. position / appearance / size / duration / event-name are configurable props.
/notification-systemTable
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.
/table-scrollDropdown
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.
/dropdownPopover
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.
/popoverModal
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.
/modalTabs
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.
/tabsAccordion
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.
/accordionCollapse
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.
/collapseSidebar
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).
/sidebar