Components

Displays a button or link with variants, sizes, a pill shape, static or Livewire-targeted loading state, leading/trailing icon slots, an accessibility-safe icon-only mode and an optional animated arrow.

Text input with sm/md/lg sizes, invalid, disabled, readonly, file, dark, RTL, and responsive states; composes with label/field/button for forms. Inside a <x-ui.field name> (or with its own name) it self-wires old() repopulation and aria-invalid/aria-describedby from the shared $errors bag.

Multiline text input with invalid, disabled, dark, RTL, and responsive states. Inside a <x-ui.field name> (or with its own name) it self-wires old() repopulation and aria-invalid/aria-describedby from the shared $errors bag.

Pick a value from a list — the native select, a custom listbox, a filterable combobox or a scrolling wheel.

Accessible form label for generated fields.

A form field wrapper with description and error parts. Pass a dotted `name` to opt into Laravel/Livewire validation wiring and automatic bracket-form HTML names, or override `html-name` explicitly. It reads the shared $errors bag, renders an associated label, threads old() into the control, and wires accessible error state.

A Laravel form wrapper with CSRF, validation, idempotency and record-version fields, plus safe draft and failed-request recovery through Form Guard.

Groups related buttons and inputs into a single attached unit.

A branded social sign-in button (Continue with Google, GitHub, Apple, and more) styled with semantic tokens and provider glyphs.

A ghost button that copies text to the clipboard and cross-fades copy → check (or a failed mark), announced to screen readers; icon-only by default, or `show-label` for Copy → Copied text.

A <fieldset> that groups related controls under an optional <legend>, with a single disabled toggle that natively cascades to every control inside.

A read-only input paired with a copy-to-clipboard trigger that cross-fades to an animated check. Icon or labelled-button trigger, alignable to either inline edge.

Attaches icons, text, buttons, or a clear control to an input within a single bordered group. The input forwards wire:model unchanged, so a debounced Livewire search is an icon addon, an input and a clear button.

A segmented input for one-time passcodes with paste support.

Country selector and national number field that produces an E.164-formatted value, with a filterable listbox of 30 common countries.

Masked credential field with reveal and copy actions, built on the input-group primitive.

A money input with a currency-symbol affordance and live locale formatting (thousands grouping + fixed decimals). The visible field shows the formatted amount while a hidden field carries the raw decimal value, so the server receives a clean number. Inherits a wrapping field's name via @aware and self-wires aria-invalid/aria-describedby + old() off the shared error bag.

A numeric stepper input with decrement/increment buttons, min/max/step clamping, and keyboard arrow stepping. variant="stepper" swaps the typing surface for a live aria-live read-out — the commerce quantity control.

A text field that accepts free-form durations ("1:30", "90m", "1.5h", "1h30", "1,5u") and normalizes them to integer minutes on blur/Enter, formatting the committed value as a clock, hour/minute, or decimal string.

A value shown as text in the host typography that edits in place: a record title, a client name or a description. Click, Enter, Space or F2 opens a matching input (or an auto-growing textarea), Enter or blur saves, Escape cancels, with required and maxlength checks, a flush variant for record headers that keeps its shape while editing, edit on focus, x-model and wire:model on commit, a Livewire save method, a hidden input for plain forms and error-bag validation.

Document lines with money totals: an editable or read-only table of lines with quantity, unit price and VAT, and a subtotal, VAT per option and total.

A postal address form shaped per country — which fields show, in what order, which are required and what they are called — from a built-in table for every country and territory (libaddressinput data: dependent locality, sorting code, region lists for sixty countries, and a country list) that the application can extend, with correct autocomplete tokens, Laravel validation errors, an error summary, and a country-specific extension slot.

Token/chip input that lets users add, remove and paste comma-separated tags with full keyboard and form support, and an email mode for recipients with a flagged chip and message per invalid address.

An @-triggered people picker inside a textarea, chat-composer style: the text after @ filters by name or handle, rows show avatar, name, handle, title and presence, and inserted mentions are painted in colour while the textarea stays the form field.

A password field with a live strength meter (segmented bar + text label, conveying level by more than colour), a show/hide toggle, and an optional requirements checklist that ticks off as rules are met. Scoring is self-contained (length + character-class variety, no npm lib). Inherits a wrapping field's name via @aware and self-wires aria-invalid/aria-describedby off the shared error bag; old() is intentionally not restored (Laravel never flashes passwords).

A playful text input that bursts token-coloured glyphs or confetti chips from the caret on every keystroke, with a small kick on the field; the particles fly up, drift, rotate and fade as self-removing DOM nodes. Composes the input primitive and is a no-op under reduced motion.

A drag-and-drop file upload input in three shapes (dashed zone, one-row compact, or a Choose files button), with list or thumbnail-grid previews (images show the picture, PDFs their first page, videos their first frame), already-uploaded material shown alongside and removable, accept + max-size validation, normal multipart form submission, Livewire 3/4 wire:model upload progress, and an optional `endpoint` that uploads each file straight away with live progress, abort and retry.

A backend-agnostic WebAuthn ceremony: sign in with or add a passkey against your own options and verify endpoints, or laravel/passkeys through a preset, with clear pending, unsupported, cancelled, error and success states.

A Cloudflare Turnstile check (managed mode) for a form: loads Cloudflare's script once, only when it renders, puts the token in a hidden input, follows the Brok theme and survives Livewire morphs and wire:navigate. Renders nothing without a site key.

Native checkbox with sm/md/lg sizes, indeterminate, invalid, disabled, dark, and RTL support. Optional animated variant with a spring-drawn SVG tick and strike-through label (reduced-motion safe).

Native radio control with token-driven focus and disabled states, plus a neutral fieldset-based group with legend, orientation, help text and Laravel validation wiring.

Accessible switch control with RTL-aware thumb movement, sm/md/lg sizes, pill or rounded radius and an optional inline label. Forwards wire:model onto the underlying input and keeps aria-checked in sync with server-driven Livewire changes.

A preference row: the setting's name as the switch's label, one sentence on what it changes, an optional status badge, and the switch at the end of the row.

A two-state button that can be on or off.

Pick-one and pick-many controls built on native radios and checkboxes — a card, a full-width row, a segmented tab, a chip or a colour swatch.

A set of two-state buttons with single or multiple selection.

A status pill that is itself the trigger for a menu changing that status, with each option previewed as the pill it would become.

A compact, Linear-style popover picker that changes one property of a record (state, priority, assignee, labels) with search, check marks, digit shortcuts, a hotkey and wire:model.

A search field that chooses people (members, contacts) with their avatar and type: chips with remove buttons, grouping by type, full keyboard, wire:model and a server search mode.

Size, material or plan chips for a product form: visually-hidden native radios or checkboxes inside styled labels, with a sold-out state, no JavaScript.

A star rating slider with half-star support, keyboard navigation and a hidden form input, plus a JavaScript-free `display` read-out for showing a score.

A button that cross-fades between an 'on' and 'off' named slot (e.g. two icons) with an accessible role="switch" toggle.

Wrapping row of clickable pills that emit a selection event when chosen.

A faceted filter toolbar of popover facets with searchable multi-select option lists, count badges, and a clear-all action.

A readout of the filters currently narrowing a list, as removable chips with a clear-all shortcut.

A localized month grid with full keyboard navigation and an ISO hidden form value.

Localized calendar popover with full keyboard grid navigation and an ISO hidden form value.

One field that opens a two-month range calendar with presets and a hovered span preview; start and end post as {name}_start / {name}_end, the field shows the range in the chosen display format, and min/max/disabled days pass to the calendar.

A field that opens a popover of hour and minute options (with an AM/PM segment in 12-hour mode) and writes a normalized 24-hour HH:MM hidden form value.

A compact week strip: weekday over day number, a month label, arrows that page by a week, ISO value, keyboard navigation, min/max bounds; localized with Intl.

Countdown timers to a target moment — boxed unit cards with rolling digits, and a whimsical crawling-snail timer.

A compact time-tracking control: elapsed H:MM:SS since a server-given ISO 8601 start, recomputed from the clock on every tick, with a Start/Stop toggle, a quiet Discard icon button, an optional key and label, and a bindable draft description. A compact variant fits a top bar on one line. Emits cancelable timer-start, timer-stop and timer-discard events and can call Livewire methods.

Numeric range controls — a draggable track (single or two-thumb range, with discrete pips and scrubber variants), an angle dial, an exposure ticker, a media scrubber, or a springy elastic slider that stretches past its bounds.

The iOS slide-to-unlock control: a pill track with a shimmering label and a draggable thumb that unlocks when dragged past a threshold, dispatching an 'unlock' event.

A flexbox layout primitive that arranges children in a row or column with consistent spacing, alignment, and optional dividers.

An overflow-safe inline layout primitive for wrapping actions, tags, filters, and metadata with an approved gap vocabulary.

A mobile-first grid primitive with fixed column and gap presets plus min-width-zero child defaults.

A centered content-width primitive with semantic max-width and density-aware gutter tiers.

A semantic page-section primitive with density-aware vertical rhythm and tokenized surface tones.

A constrained panel primitive combining semantic tone, density-aware padding, radius, and elevation tiers.

A readable long-form content primitive with bounded line length and resilient wrapping for long words and URLs.

A controlled full-bleed primitive for tables, code, and media, with an optional contained horizontal scroll mode.

Constrains its content to a given width/height ratio.

Horizontal or vertical separator for grouping content.

A scrollable region with a custom, themeable scrollbar.

A flexible layout for list rows: media, content (title, description), actions, plus full-width header and footer rows; grouped with separators, as a container, link or button.

A marketing section heading — an optional overline, a balanced title and a supporting subtitle, left- or centre-aligned and optionally laid over a photographic background with a token gradient scrim.

A dense heading for a pane or section inside an application screen: an h2 to h4 title with an optional count, description and actions slot, or the h1 title of an application page (variant="page").

Progressive disclosure — a stacked accordion, a single collapsible section and a clamp-and-reveal show-more.

Drag-to-arrange surfaces — a kanban board, a sortable list and a swap-in-place grid.

Resizable panel groups: any number of panels with default, min and max sizes, hairline handles with a grip that drag, take Arrow keys and reset on double-click.

A responsive bento-box grid with span-controlled cells for showcasing features.

An inline-editable dashed text card with a label, an editable textarea, and edit/save affordances.

The list + detail layout of a triage (inbox) screen: list and detail panes side by side with a resizable divider, one pane at a time with a Back button in a narrow container, and focus returned to the row that opened the detail.

Tabbed navigation — a compound panel-switching primitive, or a standalone bar whose active marker slides between tabs.

Segmented navigation: one raised pill for the active destination, quiet labels for the rest — the top-bar nav of a product shell, also usable for client-side view switches.

Displays the path to the current resource using a hierarchy of links; a crumb takes an icon, or is icon-only with an accessible label.

Page navigation with previous/next controls, page links, status text, disabled edges, outline/icon-only styles, a page-size slot, and a go-to-page form (GET, or Alpine state with x-page).

Loads the next page of a list when the end comes near (window or a scroll container), through a Livewire method or a load event with done() and fail(). A real Load more control works without JavaScript; loading, error with Retry, the end message and a polite live region keep the layout and focus still.

The mark + wordmark lockup a header, footer or auth screen leads with: a filled tile carrying the first letter (or an icon/logo slot) beside the name, as a link or a plain group, in three sizes and two shapes.

A site navigation menu with hover and focus panels, linked controls, an active (aria-current) state for links and triggers, and complete arrow, Home, End, Enter, Space, Tab, and Escape keyboard access.

A collapsible application sidebar with persistent state, accessible navigation, and an optional draggable resize handle (clamped, localStorage-persisted width).

A filterable, keyboard-navigable command palette for server-authorized commands with stable action keys, disabled reasons, grouped links, shortcuts, and empty-state handling.

A global keyboard-shortcut registry: single keys, Mod combos (Cmd on macOS, Ctrl elsewhere) and two-key sequences, with scopes where the topmost wins, typing-safe defaults, a searchable cheat-sheet dialog and platform-aware kbd hints.

A debounced search box that returns grouped hits in a popover, each group labelled by which field matched.

A named view switcher with a menu mode for many views and a tab-strip mode for few, distinguishing system, owned, and shared views.

A server-authorized organization switcher: a trigger naming the current organization opens a menu of the others and a pick submits its stable id; long-list search, loading, error and empty states, an optional create link, and the original inline radio form as a variant.

A compact language control: the trigger names the current locale and a menu of single-choice items, each in its own native name and lang, submits the pick through a form or a Livewire method.

In-page navigation built from a target container's headings (or explicit items), with IntersectionObserver active-highlight, smooth scroll and aria-current.

A cluster of social profile links as either a compact row of icon buttons or a vertical labelled list, with currentColor brand marks (X, GitHub, LinkedIn, Instagram, Facebook, YouTube, Dribbble, TikTok, Threads, Bluesky, Mastodon, Discord, Pinterest, WhatsApp, Telegram, Reddit, Twitch, email), a custom `icon` per link, and md/full button shapes — no raw brand colour.

A skip link for application layouts: visually hidden until it takes keyboard focus, then it jumps to the main content element.

The bar that spans only the main column — breadcrumb trail or title said once, record-to-record stepping, an ambient integration-health pill, role, locale, theme and notifications.

The first line of every admin screen — title, a scope line the host can rewrite in place, an optional count badge, and a wrapping action cluster.

The operational figures above a list as a grid of stat tiles, each a link or a button that applies the saved view holding the rows it counts.

Why a screen needs a person, most severe first — one alert per cause with the action that owns the fix; renders nothing at all when the list is empty.

One GET form of the controls that apply to a whole list — search, a date-window select with an inline custom range, saved views, a reset link when modified, and an export/tools cluster.

The list readout — showing from–to of matched (filtered from total), a keyboard legend, a per-page select and previous/next — server-rendered or bound live to the list's Alpine state.

A read-only quick view that slides in beside a list — sticky identity header with status pills and queue position, previous/next stepping, tabbed subjects with counts and attention markers, and a footer that offers the full record.

A sticky record header — title, status, a dirty-state note, and a save/secondary action cluster gated on the record being both dirty and valid.

A line tab strip for a record — one tab per subject with a count and an attention marker, deep-linkable through `?tab=`, panels supplied as named slots keyed by tab.

One subject on a record page or quick-view sheet — a small caps title, one sentence saying what the section decides, an optional aside or 'view details' link, and the content in a card.

A side rail (docked to the viewport bottom on mobile) listing what currently blocks saving, where each blocker moves focus to the field responsible.

An audit/activity feed with filter chips carrying counts, a before→after diff cell for changes, a per-filter empty state, an export action, and a permission-denied state distinct from empty.

The shared anatomy of every modal surface: header, title, description, footer and close. Dialog, alert dialog, sheet and drawer compose these parts, so the four panels keep one spacing, type and close-affordance recipe.

The four modal surfaces that compose the shared overlay anatomy — a centred dialog, a confirmation alert dialog, an edge sheet and a bottom drawer.

Non-modal floating panel anchored to a trigger, with an animated entrance, collision-aware placement, click-outside and Escape dismissal.

Hover- and focus-triggered tooltip that links to its trigger via aria-describedby, with placement, arrow, delay and side-offset props plus a rich-content slot.

Shows rich content in a card when a trigger is hovered or focused. A `preview` slot turns it into an inline component preview with a stage and caption; the card opens below or above the trigger.

Action menus — a dropdown on a trigger, a right-click context menu, an application menubar and an inline-expanding nested menu.

Floating contextual toolbar for bulk-selection actions: follows a live selection count, sticks to the viewport or the content area, and holds a suggested action, an Actions menu and Clear. Dismissable via button or Escape key.

Floating action button that expands a stack of contextual action buttons with animated transitions, keyboard dismissal and full ARIA support.

A client-only GDPR cookie-consent banner with Accept all / Reject all / Manage preferences. Per-category switches (necessary always on, analytics, marketing) persist to localStorage and dispatch a consent-change event — no network, no CSRF.

A callout for short, important messages with semantic variants.

Notifications with one Alpine lifecycle for queued delivery, normalized variants, timed or manual dismissal, animation, and cleanup, plus an optional subject link and one action such as Undo. Listens for a window event (`event`, default `toast`) and renders a session flash (`flash`).

Displays a determinate progress indicator with an optional threshold tone and a striped or shimmer animated fill.

Async bulk-operation progress with a per-item failure list, retry-failed, download-report, and dismiss.

Loading placeholder with shape presets and composable layouts.

A loading-ui.com-inspired family of animated loaders — spinners, dots, orbital, bars, square grids, shapes, text and a few playful ones — all token-themed and reduced-motion safe.

Empty state for when there is no data to display.

A full-width banner for environment, system-status, maintenance, or promo announcements — fixed to the top of the page or inline, optionally with a leading icon, trailing actions, a dismissible close button that can persist its dismissal for the session, and a soft contained callout skin for in-page use.

Animated status dots — a person's presence and a system or service's state.

A compact permission result for allowed, denied, inherited, and conditional states with visible text and a symbol so meaning never depends on color.

A bar or ring that fills proportionally to how far the window or a target element has been scrolled.

Row of actions for reacting to content: up/down vote, copy-to-clipboard, and share.

In-app notification surfaces — a stacked feed panel, a single content card, a dense inbox row, and a corner count badge.

A looping onboarding progress card with done, in-progress and pending steps; the active step's bar fills over a configurable duration via a CSS transition, with role=progressbar and reduced-motion support.

Renders a centrally maintained icon by name, with semantic currentColor styling, fixed size presets, and decorative or labelled accessibility modes; <x-ui.icon.tile> sits a named icon or an inline SVG in a tinted tile.

Compact status label with semantic variants, sizes, and a read-model `tone` (positive/attention/negative/info/neutral) that resolves to the soft recipe in one place.

User avatars — a single image/initials avatar and an overlapping avatar group with an overflow count.

A responsive data table with header, body, row, cell, sort-button, and shared announced loading and empty-state row parts; rows can link as a whole.

A platform mark (X, YouTube, Instagram, TikTok, LinkedIn, Pinterest, Vimeo) as one inline SVG from Simple Icons (CC0 1.0), in currentColor or an opt-in brand colour, decorative or labelled.

A small chip that names a source, company or platform: a leading brand icon, favicon or monogram beside a truncating name, static or as a link, in sm and md.

A client-side table whose column headers open a sort and filter panel that knows the column's kind (A → Z, Low → high, Oldest → newest; conditions like contains, equals, between, before; a pick list of the column's values, committed with Apply), with active-filter chips, a Columns menu, row selection, layout-stable pagination, badge tones, row actions, inline edits, density, sticky header and expandable rows.

A dense operational table with pinned columns, visibility controls, stable selection with an explicit page-vs-matching scope, opt-in row activation, and generic server-authorized bulk actions with typed-word confirmation, idempotency, progress, partial failure, and reset hooks.

A server-driven Livewire 3/4 data table with allowlisted sorting guidance, debounced search, per-page selection, paginator links, shared loading and empty rows, optional row selection, and mandatory stable row keys. It remains readable without Livewire.

The eligible quick action(s) for a table row inline, plus an overflow menu for the rest, driven by an actions array.

Time entry by the week — a grid of duration cells per row and day with live totals, locked days and a save action.

Work tracker issues: one dense row with priority, key, state, labels, estimate, due date and assignee, and a grouped list with a keyboard cursor and selection.

A keyboard triage queue for any record type: one generic row with a start slot, title, meta line and end slot, and a grouped list with a keyboard cursor, selection and optimistic hide and restore.

A roving keyboard cursor for any list of rows: the shared createListCursor ES module (j/k and arrows, Home/End, Enter, x to select, Shift+J/K to extend, Escape to clear, Livewire-morph safe) that issue-list and queue-list build on, plus the uiListCursor Alpine data and a thin <x-ui.list-cursor> wrapper for rows marked with data-list-row.

A read-only money value that formats integer minor units or decimal strings by currency and locale without floating-point calculation, with accounting and compact modes.

A product price: the current amount, an optional struck-through compare-at amount and an optional savings badge in one baseline-aligned run, formatted by currency and locale through money-value.

One stroked glyph per weather condition (clear, clouds, rain, snow, fog, storm) in four sizes, decorative by default and labelled on request.

A consistent user identity row with avatar fallback, display name, secondary identifier, and optional role and presence status in compact or full form.

A bounded semantic audit feed that separates actor, action, subject, time, and escaped metadata from already-authorized view data.

A bounded ordered status history with stable state keys, semantic events, absolute timestamps, and explicit empty behavior.

Displays a keyboard key or key combination.

Plain text with matched character ranges marked in native <mark> elements, from server offsets or a query; every part is escaped.

An interactive, collapsible JSON tree with line numbers, colour-coded values and array truncation.

Animated numeric read-outs — a count-up that animates into view, and a digit-roll that re-rolls each column whenever the value changes.

Sequenced event displays — a free-form timeline and a stepper that covers both a numbered install/checkout sequence and a plain status stepper.

A data-driven project roadmap: rows of projects grouped by a status label, each with a bar from its start to its target date on a week or month axis, milestone markers, progress and a today line. The axis scrolls sideways while the names stay pinned. Server-rendered; a small Alpine behavior opens the axis at today.

A metric card with label, value, and a colour-coded trend delta. Add `tone` to colour by meaning instead of sign, or `href`/`as` to make the tile a filter link/button.

Inline citation chip with a numbered badge, truncated excerpt, and source label that links when an href is set.

An animated LED dot-matrix display: a grid of glowing pixels in a square, circular, triangle or hex panel, with 17 built-in animations (wave, pulse, vu, loader, bars, orbit, spiral, radar, ripple, helix, snake, rain, comet, scan, pinwheel, twinkle, heart) or a static custom pattern. Single-token colour with opacity-driven lighting, reduced-motion safe.

A stacked notification feed that reveals items one at a time with a slide-up, fade, and subtle scale, newest on top, with optional auto-cycling.

A card-wrapped panel with an optional header and a divided list of rows, each with a leading visual, primary and secondary text, and trailing meta.

A key/value readout — label on the start side, value on the end side, a hairline between rows — from a server array or an Alpine-bound expression, with per-row tone and mono.

A bullet list whose marker is a check glyph — plan features, comparison points, what-you-get rows — from a server array or item children, with a plain or chip marker, a tone, three sizes and an excluded state.

A transit station badge for Singapore MRT/LRT and Hong Kong MTR with semantic theme colours by default and optional official line colours.

Renders a LaTeX mathematical expression via KaTeX, with display (block) and inline modes, a token-styled container, and a raw-expression fallback for no-JS environments.

A content container with header, content and footer sections; renders as div, a, article, section, li, details, dl or figure, with a frameless ghost variant.

A tinted outer frame with a header row (icon, title, end action) around a raised inner well for KPI tiles, chart panels and short lists.

Card with bulleted key points and a row of source link chips, headed by an optional decorative sparkle.

The product tile a listing, carousel, recommendation rail or wishlist repeats: media, badges, name, rating, price and actions on a card, in grid, row and compact layouts.

A responsive grid of option cards: name, description, a hero metric with a note, attribute rows, a feature check list and a call to action, with one option highlighted as recommended.

A stack of trigger rows that expand into a centered modal panel over a blurred backdrop, revealing each row's full detail. Escape / backdrop-click closes, with focus trapping and restore.

A single task row with a checkbox that strikes the title through on completion, plus optional due date, tags and a priority badge.

A compact current-plan card for plan name, billing interval, renewal or cancellation state, bounded usage meters, and an application-owned management link.

A server-driven approval surface with explicit states, allowlisted actions, per-action comment rules, idempotency and record-version hooks, and an immutable history slot.

A single calendar event card with a tone-coloured accent bar, time chip, location, attendee avatars and an optional join action.

A goal card pairing a current-vs-target readout with a token-themed progress bar, status badge and deadline.

The testimonial figure: an optional quote glyph or star rating, the blockquote, then the attribution row (avatar, name, role and company), framed in the card surface or bare for a surface that already holds other media.

A Twitter/X post card with author, verified tick, post text, optional media, a link to the post, an optional default slot for extra content (a badge, a tag), and live reply, repost, like and bookmark controls that toggle and dispatch events.

A rich Open Graph link preview card with thumbnail, favicon, domain, title and description, wrapped as a single anchor.

A feature card whose background is an animated LED light grid that lights dots to spell a short word, then cycles between a few preset patterns on a timer. Built from a tiny 5-row dot font; respects reduced-motion by rendering the word statically. Composes card and (optional) button primitives.

A marketing download widget: a fanned pile of app icons that opens into a row to pick one, and the standard black App Store and Google Play badges that download the chosen app (per-app store links, sensible fallbacks). Motion-safe, keyboard-accessible.

An Apple-invites-style vertical list of event cards: each card layers a status badge, an overlapping attendee avatar group, and the event title, date, and location over a background photo with a token gradient scrim. Drag a card by its handle to reorder, or focus the handle and use Arrow Up / Arrow Down — every reorder is announced through a live region.

An expandable job-posting card: company logo, title, location, salary and badges collapsed; reveals a description and an Apply action with a smooth height/opacity transition (no x-collapse). Keyboard- and screen-reader-friendly with aria-expanded/aria-controls; RTL-aware and reduced-motion safe.

A working email compose card: recipient, Cc and Bcc chips (Enter, comma, paste; addresses only), subject, message with emoji insertion at the caret, attachments by button or drop with size chips, Ctrl/Cmd+Enter to send, minimise and discard — posting a real form or dispatching compose-send.

Token-themed data visualisations — the core multi-series chart plus dependency-free SVG variants for sankey, word-cloud, venn and violin plots.

The card shell every chart and diagram sits in — a title or KPI value, a description, an optional actions slot and an auto-toned trend badge over a content well for the visualisation.

Single-value readouts of a fraction of a whole — an arc gauge, a circular progress ring, linear/radial usage readouts and a liquid-fill gauge.

A horizontal bar that visualises segments of a whole with proportional widths, variants and text alignment. Supports an opt-in nested mode for overlapping subsets of one total, with an explicit unknown state.

Calendar contribution grids — one heatmap primitive that covers a date range or the last N weeks, discrete or interpolated colours, squares or bubbles, with month labels and a less/more legend.

A compact inline SVG trend chart (line, area or bar) with an optional value, trend indicator and date range — no charting dependency.

Dependency-free, token-themed relationship diagrams — flow, network, org chart, indented tree, mind map and fishbone.

An interactive MapLibre GL map with free CARTO light/dark basemaps (no API key) that flip with the theme. Boots MapLibre, resolves overlay colours from design tokens, and reads declarative child nodes — <x-ui.map.controls>, <x-ui.map.marker>, <x-ui.map.popup>, <x-ui.map.route>, <x-ui.map.arc>, <x-ui.map.cluster> — plus an optional heatmap layer. Cleans up the instance and observers on teardown.

Before/after image (or arbitrary content) comparison with a keyboard-accessible, RTL-aware draggable divider.

Renders a scannable QR code from a string entirely client-side with no npm dependency, using a vendored MIT Reed-Solomon encoder and an inline themed SVG.

A grid of image options with keyboard support. Single-select by default; `multiple` turns it into a multi-select gallery with a live count + Reset action bar.

An immersive thumbnail card with a centered play button that opens an accessible modal lightbox with the embedded video and an optional sound toggle.

Opens one image in a modal viewer built on dialog, with keyboard and button zoom (fit, actual size, in, out), drag and arrow-key panning, a polite zoom announcement and an Open original link.

Click-to-load video facade: nothing from the video host loads until the visitor presses Play, then a sandboxed iframe replaces the facade and takes focus. Without JavaScript the facade is a plain link to the video.

Data-driven image sets with a zoom lightbox — a masonry or uniform tile grid, and an ordered, reorderable strip of screen-flow steps.

Media clipped to decorative shapes via CSS clip-path — for images and for autoplaying video, sharing one shape vocabulary.

A frame that keeps wrapped content sharp in the centre and progressively backdrop-blurs only the edges (Apple Vision Pro style), with configurable blur, inset, fade length and radius.

A visual credit/debit card surface showing brand mark, chip, masked number, holder name, and expiry.

A working audio player around a native <audio> element: play/pause, a seekable scrub-bar with time read-outs, playback-rate cycling and a mute toggle. Localised labels, RTL-aware, reduced-motion safe.

A seekable media scrubber: a token-styled track with a fill, drag thumb and optional time read-outs. Pointer + keyboard seek, RTL-aware, dispatches scrub/scrubstart/scrubend events (accepts scrubset for external control).

A lightweight contenteditable rich-text editor surface with a toolbar slot, marks (bold/italic/underline/strike/code/link), block types (headings, blockquote, code, lists, to-do lists, callouts, toggles), typed / and @ triggers at the caret, mentions, images by URL or upload, sanitised saved HTML for x-model, wire:model or a hidden form field, and a reactive selection state other editor parts bind to.

Formatting toolbar for the rich-text editor. `variant="fixed"` (default) carries the block-type dropdown (turn-into-menu), mark buttons (bold/italic/underline/strikethrough/code), list/quote/link controls and a More overflow menu; `variant="floating"` is the compact selection bubble with the marks and Link. Composed as <x-ui.editor.toolbar>; <x-ui.editor-toolbar> stays as the compatibility tag.

Command palette for inserting and transforming editor blocks. Typing '/' in the editor opens it at the caret (`floating`) or drives the inline list, with live filtering, keyboard navigation and grouped item categories. Composed as <x-ui.editor.slash-menu>; <x-ui.slash-menu> stays as the compatibility tag.

An @/# mention autocomplete that opens at the caret when its trigger is typed in the editor (`floating`), filters people or typed items (pages, tasks, projects) grouped by type, supports a host search, and inserts a linked mention into the editor. Composed as <x-ui.editor.mention-menu>; <x-ui.mention-menu> stays as the compatibility tag.

Dropdown to convert the current editor block to a different type. Owns the editor's block-type list (`types`), offers a label or current-type trigger (or a custom trigger slot) and accepts extra rows after the list; marks the active type with a check icon. Composed as <x-ui.editor.turn-into-menu>; <x-ui.turn-into-menu> stays as the compatibility tag.

Gutter control cluster rendered beside an editor block. Provides an insert-below shortcut and a drag handle that opens the block menu (turn-into-menu's block-type list plus move, duplicate and delete). Composed as <x-ui.editor.block-handle>; <x-ui.block-handle> stays as the compatibility tag.

A drop-cursor line that marks where a dragged block will land, auto-tracking the nearest gap in the editor. Composed as <x-ui.editor.drop-indicator>; <x-ui.drop-indicator> stays as the compatibility tag.

Floating link editor toolbar with two modes: an editing state (URL input + Apply) and a preview state (URL chip, Open in new tab, Edit, Unlink). Integrates with the editor contract via editor-exec events. Composed as <x-ui.editor.link-toolbar>; <x-ui.link-toolbar> stays as the compatibility tag.

Text and highlight colour picker for the rich-text editor. Swatches are token-pure in source: each carries a data-token attribute naming the CSS custom property; the colour is resolved at runtime via getComputedStyle so no hex/rgb literal ever appears in the template. Composed as <x-ui.editor.color-dropdown>; <x-ui.color-dropdown> stays as the compatibility tag.

A popover-style emoji picker with category tabs, search, and a grid of Unicode emoji characters. Integrates with the editor contract (dispatches editor-insert and emoji-select events).

A semantic media element renderer for the editor — image, video, file, and embed types — with alignment, captions, placeholder states, and optional aspect-ratio constraint. Static; no JavaScript. Composed as <x-ui.editor.media>; <x-ui.editor-media> stays as the compatibility tag.

Row and column handles that overlay a table for selecting, inserting and deleting rows and columns in the editor. Composed as <x-ui.editor.table-handle>; <x-ui.table-handle> stays as the compatibility tag.

Edge and corner drag handles that resize an atomic editor node (image or embed), with keyboard support and optional aspect-ratio lock.

Inline comment thread popover for the editor — shows a thread of replies, a reply composer, and a resolve action. `type="suggestion"` leads with the proposed change (deleted → inserted), says "suggested an edit" and replaces resolve with Accept / Reject.

An AI command menu for the editor — a prompt input, a list of writing actions, and a result preview with Accept, Try again, and Discard controls. Calls a configurable completion endpoint for real AI, with a labelled demo mode when none is set.

Renders untrusted Markdown to safe HTML on the server (CommonMark plus GitHub tables, strikethrough, task lists and autolinks) with raw HTML escaped and unsafe links removed, styled by the rich prose variant.

Compact tile that previews a file by type with an icon, extension badge and filename caption.

The shell every document surface shares: a rounded card with a toolbar row (file glyph, name, an actions cluster), an optional sidebar column, a scrollable body and the loading and error overlays with one shared copy, driven by the viewer's Alpine `loading` and `error` state.

Pro viewers for the common document formats — PDF, Word, Excel and CSV.

Visually build a JSON Schema for document extraction with nested fields, types, and a live preview.

A macOS Finder-style document browser with an expandable folder tree, breadcrumb navigation, and grid/list views.

A page-thumbnail grid that groups a PDF's pages into multiple output documents by inserting split points between thumbnails, rendered with pdf.js.

Pro editing surfaces for documents; spreadsheet editing is excel-viewer's `editable` mode.

A token-styled signature capture with a draw mode (signature_pad canvas with clear/undo) and a type mode (script-rendered typed name), writing a PNG data URL or typed value to a hidden input for form submit.

A chat composer card with an auto-resizing textarea, model pill, attach action, and a smart send button.

Completion status card mapping a finish reason to a coloured badge and token count.

Tool-invocation card showing the function name, status badge and arguments.

A collapsible reasoning panel revealing an assistant's step-by-step thoughts as numbered, italic bullets.

A quiet, one-line rollup of what an agent run did, collapsing to a counted sentence and expanding to the ordered list of steps.

A next-token probability debugger listing candidate tokens with proportional bars and percentages.

A live agent-plan card: "4/7 tasks complete" over a compact list of steps, each marked pending, active, done, failed or skipped.

A chat bubble for a single sender turn with an optional avatar and name label; supports user, other, and system roles.

A vertical stack of chat bubbles composing a back-and-forth conversation.

A voice-agent audio bar visualizer reacting to state (idle/connecting/listening/thinking/speaking). Synthetic demo mode by default; optional live microphone via Web Audio (graceful fallback). Token colours, reduced-motion safe.

A real-time audio waveform on canvas (scrolling or static bars) driven by the live microphone via Web Audio, with a synthetic demo fallback. DPR-aware, token-coloured, reduced-motion safe, with full teardown.

A decorative orb with four token-coloured looks via a `variant` prop: `liquid` (default) — a glowing voice-assistant sphere in hand-written WebGL1 (GLSL simplex-noise fragment shader, no three.js/textures) that breathes in reaction to agent state (idle/listening/talking/thinking), with a 2D-canvas fallback; `gradient` — a CSS-only "eclipse" sphere with a luminous breathing rim and soft halo; `particle` — a rotating fibonacci-sphere point cloud with depth-bright dots; `geometric` — a rotating latitude/longitude wireframe sphere with depth-based line opacity. Derives hue/saturation from --primary/--accent (or an explicit colors override), DPR-aware, reduced-motion safe.

A voice-dictation widget: a circular mic toggle centred inside a halftone dot-cloud radial audio visualiser, with an aria-live transcript region below. Clicking the mic toggles listening; in demo mode (default, no permission needed) the dot-cloud pulses outward and a faux transcript types in word-by-word. With the live prop it progressively enhances to real SpeechRecognition when available. Token-derived colours, reduced-motion static ring.

Read-only code surfaces — a highlighted code block, a single-line snippet, a tabbed CLI command block and a unified/split diff.

A continuous-integration status badge (passing, failing, pending, cancelled) as a compact pill or a detailed card.

A release/version badge showing the latest tag, release name, date, asset count and an optional pre-release marker, as a pill, row or card.

A human-readable visualiser for a 5-field cron expression — a plain-English summary, a per-field breakdown and upcoming run times.

A read-only environment-variable table with masked secret values, click-to-reveal, environment badges and a copy-.env action.

A GitHub star button linking to a repository, showing the mark, a label, and a formatted star-count pill.

Dev-only fixed corner badge that shows the active Tailwind breakpoint via responsive show/hide spans. Gated by :enabled so it is safe to leave in production templates.

A semantic date and time value with relative, date, time, and datetime modes, explicit locale and timezone controls, server-first output, and explicit empty and invalid states.

tokenui.dev-inspired design-token documentation chips — a base name → value token with click-to-copy, plus typed variants for colour, typography, dimension, motion and scalar tokens.

Reports the WCAG 2.0 contrast ratio between a base and background colour with an AA/AAA/Fail grade — luminance and ratio computed from hex inputs, or overridden for APCA/pre-computed values.

A grid or scale strip of colour swatches with name + value labels and per-swatch copy-to-clipboard, for design-system documentation. Supports an optional heading label and a vertical scale orientation.

A documentation table listing a component's props with colour-coded type tokens, defaults, required markers and descriptions.

A light / dark / system theme toggle: a segmented radiogroup that sets `.dark` on the document, persists the choice to localStorage, and live-tracks the OS preference in system mode.

A head tag pair that applies the stored light, dark or system theme before the first paint: a color-scheme meta and a blocking same-origin script, so dark mode never flashes light and a strict script-src 'self' policy needs no nonce.

A self-contained slide-out theming panel: end users pick a colour preset, tune the corner radius, and toggle light/dark — applied live by injecting CSS variables and persisted to localStorage.

A decorative, aria-hidden background layer with token-coloured presets: grid, glow, aurora, beams, geometric, gradient, prism, liquid, dots. Sits behind any relative section.

Tiled, themeable background layers — dots, grid lines, circuit traces or film grain.

An animated dithered gradient background rendered on a 2D canvas, using Bayer-matrix ordered dithering to band a slowly-shifting three-color gradient into a retro pixel texture; colors derive from semantic tokens by default.

A decorative canvas grid of square pixels that light up under the cursor and smoothly fade back — or, with the idle + twinkle props, an ambient pixel-stars field, or with the flow prop, autonomous organic shapes (a drifting metaball field) rendered as pixels. Token-derived colors, default/trail/glow variants.

A decorative digital-rain canvas: columns of glyphs fall down the box with a bright leading character and a fading trail, in a semantic token color, looping. DPR aware and reduced-motion safe (static frame).

A decorative shower of shooting meteors — token-coloured heads with fading gradient tails that streak diagonally across the box. Pure CSS, reduced-motion safe (static field).

Ambient canvas particle backdrops — a drifting pointer-parallax field, twinkling sparkles, and a 3D hyperspace starfield.

forgeui.in-style WebGL shader backdrops — full-bleed animated gradient and fluid fields rendered on a canvas.

An ambient WebGL background that renders slow, animated volumetric god-rays sweeping from a focal point. Ray colour derives from the --primary semantic token at runtime, so it follows the active theme. Decorative, aria-hidden, pointer-events-none; reduced motion paints a single static frame.

A full-bleed animated WebGL mesh gradient: a three.js fragment shader domain-warps simplex noise to flow three token colours (primary/accent/secondary) across the surface. Token-driven, DPR-aware, reduced-motion safe.

Animated and decorative text treatments — staged reveals, typing, particle and cursor-repel effects, and clipped gradients.

Text with a bright highlight that sweeps across it on a loop, built from semantic tokens via bg-clip-text. Pure CSS, motion-safe (reduced motion shows static muted text).

A decorative SVG that 'writes' the word hello in flowing cursive, drawn stroke-by-stroke via an animated stroke-dashoffset. Pure CSS, motion-gated, token-coloured.

Mechanical split-flap displays — a departure-board text panel and a clock/countdown of flipping digits.

An infinite, seamless scrolling row or column; the scroll-velocity banner is a mode of the same composition.

A grid of short lines that each rotate to point toward the cursor, creating a magnetic-field look; reduced motion holds every line at its base angle.

A decorative equalizer-style row of gradient bars that pulse on a staggered loop, ideal as an animated hero backdrop; renders as a static wave under reduced motion.

Animated colored treatments that travel around an element's border, plus cursor-tracked and ambient glow effects.

An inline SVG handwritten signature that draws itself on load with a self-drawing stroke animation, themed via semantic tokens. Falls back to a fully drawn signature under reduced motion.

A celebratory confetti burst fired on click from a trigger button, drawn on a viewport canvas with token-coloured pieces, gravity and self-terminating animation. Reduced-motion safe.

Scrolling card carousels — a flat slide-and-snap track, a 3D perspective coverflow, a rotating 3D ring and a centre-emphasis phone-screen coverflow.

A coverflow-style collection browser: a horizontal row of cards where the centered card is enlarged and front-facing while neighbours recede and rotate in 3D. Navigable by click, arrow keys and drag.

Stacked card decks — a click-to-cycle layered deck, a pointer-draggable swipe deck, and an orbiting 3D ring.

A scroll-stacking deck: direct-child cards stick at a top offset so later cards slide up and stack over earlier ones, with an optional scroll-driven depth scale-down on supporting browsers.

Three notification cards that rest as an overlapping deck and fan into a column when toggled, via CSS-only translate/scale transitions. The toggle exposes aria-expanded / aria-controls.

Device and browser frames for screenshots — a browser-window chrome, a generic device bezel and an iPhone shell.

A static 3D book mockup with a colored cover, spine and page edges that opens on hover. Wraps a title/author, a custom cover or arbitrary slot content, with an optional textured material finish.

A 3D holographic profile card with pointer-tracked tilt, a moving iridescent token-gradient sheen and click-to-flip back face.

A generic interactive 3D-tilt wrapper for arbitrary content: on pointer move the card rotates in perspective toward (or away from) the cursor, scales up slightly, and shows a soft token-coloured spotlight glare that follows the pointer. Tilt is skipped under prefers-reduced-motion; colours derive from semantic tokens only.

A scrollable container that fades its edges to signal more content along the enabled axis.

A card whose two halves split apart as it scrolls through the viewport, revealing inner content between them. Driven purely by CSS scroll-timeline (view()).

Cursor- and scroll-driven image effects — trails, an infinite field and ripple refraction.

An interactive rotating 3D globe drawn on a canvas as a dotted graticule, with plotted lat/long markers and faint great-circle arcs. Drag to spin; release to resume auto-rotation. Pure canvas + 3D math (rotation matrix + orthographic projection), semantic token colours, DPR aware and reduced-motion safe (static frame).

A decorative 3D organic blob: an icosahedron sphere displaced by animated 3D simplex noise in a custom three.js vertex shader, with a fresnel rim. Token-driven colour (primary core, accent rim), DPR-aware and reduced-motion safe.

A macOS-style floating, frosted dock whose icon tiles magnify and lift toward the pointer with a neighbour falloff and a tooltip label.

A simulated multiplayer-presence overlay: labeled cursors glide along smooth looping paths inside the container, mimicking collaborators editing live. Optionally one cursor follows the viewer's real pointer. Token-coloured and reduced-motion safe (static scatter).