Components

Trigger an action or event, with variants, sizes and states.

Groups related buttons and inputs into a single attached unit.

A branded social sign-in button (Continue with Google, GitHub, Apple, and more) with token-only styling and provider glyphs — composes the button primitive, no raw brand colour.

An icon button that copies text to the clipboard and animates a copy → check transition with a live announcement.

A form wrapper that emits CSRF, spoofs PUT/PATCH/DELETE, switches to multipart for file uploads, and renders an optional validation error summary.

Form field wrapper with description and error parts; pass a name for Laravel-native old()/$errors wiring.

A fieldset that groups related controls under a legend, with one disabled toggle that natively cascades to every control inside.

Accessible label for form controls, with a required marker.

Text input with sizes plus invalid and disabled states.

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

Attaches icons, text, or buttons to an input within one bordered group.

A segmented one-time-passcode input with paste support and a hidden form value.

Multi-line text input with invalid and disabled states.

A country selector and national number field producing an E.164 value, backed by a filterable listbox.

Masked credential field with reveal and copy actions over the input-group primitive.

A money input with a currency-symbol affordance and live locale formatting; the visible field shows the formatted amount while a hidden field submits the raw decimal.

A numeric stepper input with −/+ buttons, min/max/step clamping, and keyboard arrow stepping.

A token input — type to add, Backspace or × to remove, paste to split — mirroring each tag as a hidden form value.

An @-triggered autocomplete inside a textarea that filters and inserts mention tokens.

A password field with a live strength meter (segmented bar + label), a show/hide toggle, and an optional requirements checklist that ticks off as rules are met.

An email compose/draft card with recipient chips, a subject field, message body and send/attach actions.

A text input that emits a small burst of token-coloured glyph particles on every keystroke; the particles fly up, drift, rotate and fade. Composes the input primitive and is a no-op under reduced motion.

A drag-and-drop file upload with click-to-browse, accept + max-size validation, a removable file list, and a hidden native input that submits in an ordinary multipart form.

Native checkbox styled with semantic tokens, plus an optional animated spring-tick variant.

Native radio input styled with semantic tokens.

Single-choice controls built on native radios — segmented tabs or full-width rows.

Toggle switch with RTL-aware thumb movement — sm/md/lg sizes, pill or rounded radius and an optional inline label.

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

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

Native select control with a custom, RTL-safe chevron.

Custom listbox select with keyboard navigation, type-ahead and rich options (secondary meta).

Autocomplete input with a filterable listbox and a hidden form value.

A selectable radio/checkbox option card whose whole surface is a label for a hidden input — rings and reveals a check when selected, with an optional icon and badge. CSS-only.

Selectable chips for single or multiple choice, submitting as native radios or checkboxes.

A grid of color swatches for picking one color, with an accessible name per swatch.

An accessible star rating slider with half-star support, keyboard navigation, and an optional hidden form value.

A button that cross-fades between an on and off slot with a keyboard-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.

An iOS slide-to-unlock pill with a draggable thumb that crosses a threshold to unlock and dispatches an unlock event.

Localized calendar popover with full keyboard grid navigation.

A start + end pair of date-picker popovers wired to two hidden inputs ({name}_start / {name}_end), so a date range posts in an ordinary form.

A field that opens a popover of hour and minute options with an AM/PM segment, writing a normalized 24-hour HH:MM hidden form value.

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

An iOS-style 3D wheel picker that spins, snaps to the centred option, and feeds a hidden input.

Numeric range controls — a compact draggable track (single or two-thumb range), an angle dial, a two-handle compare slider, a discrete pip/scrubber selector for settings panels, or a springy elastic slider that stretches past its bounds.

Labelled range control over the slider with a live readout and an optional two-ended gradient legend.

Constrains its content to a given width/height ratio.

Horizontal or vertical visual divider.

Content container with header, content and footer parts.

Flexible horizontal layout for list rows with media, content and actions.

Empty state for when there is no data to display.

Stacked disclosure panels with single or multiple open modes and arrow-key navigation.

An interactive section that expands and collapses its content.

Clamps long content to a fixed height behind a gradient fade mask, then reveals the rest with an accessible Show more / Show less toggle.

A scrollable region with a custom, themeable scrollbar.

Resizable panel groups with a draggable handle and keyboard support.

A collapsible application sidebar with persistent state, accessible navigation, and an optional draggable resize handle that remembers its width.

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

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

An overflow-safe wrapping row for actions, tags, filters, and metadata.

A mobile-first grid with fixed column and spacing presets.

A centered content-width primitive with density-aware gutters.

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

A constrained panel combining tone, padding, radius, and elevation tiers.

A readable long-form container with bounded measure and resilient wrapping.

A controlled full-bleed and contained-scroll primitive for wide content.

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

A compact horizontal date strip with a month header and a CSS-only selectable row of weekday/day cells, today subtly marked — no JavaScript.

A grid whose tiles exchange positions on drag (drop one onto another to swap), built natively in Alpine — keyboard-operable with a live-region announcement.

A marketing section heading — an optional uppercase 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 board of columns with draggable cards, supporting pointer drag-and-drop and full keyboard reordering.

A drag-to-reorder vertical list with grip handles, full keyboard reordering, and hidden inputs that mirror the order for form submission.

Path to the current resource as a hierarchy of links.

Page navigation with previous/next controls and page links.

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

A site navigation menu with hover- and focus-revealed content panels.

A horizontal bar of dropdown menus with roving focus across triggers.

Filterable, keyboard-navigable command palette list.

In-page heading navigation that highlights the section currently in view.

A navigation list that highlights the link for the page section currently in view via IntersectionObserver.

A hierarchical, inline-expanding menu built on native <details>, rendered recursively for arbitrary depth.

A cluster of social profile links — a compact horizontal row of icon buttons or a vertical labelled list — with currentColor brand marks (X, GitHub, LinkedIn, Instagram, Facebook, and more) and no raw brand colour.

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

Modal dialog with focus trap, Escape-to-close and focus restoration.

A modal confirmation dialog with focus trap, Escape, and confirm/cancel actions.

A panel that slides in from a screen edge, sharing the dialog focus-trap patterns.

A bottom sheet with a drag handle and drag-to-dismiss.

Non-modal floating panel anchored to a trigger.

Hover- and focus-triggered hint linked to its trigger via aria-describedby.

Rich content shown when a trigger is hovered or focused, with open/close delays.

A menu of actions revealed by right-clicking a region, with roving focus.

Menu with keyboard navigation, click-outside dismissal and Escape handling.

Polite live-region notifications driven by a global window.toast() helper.

A floating contextual toolbar that slides up for bulk-selection actions, dismissable by button or Escape.

A floating action button that expands a stack of contextual actions with animated transitions.

An inline trigger that reveals a floating component preview on hover or keyboard focus, using pure CSS.

A client-only GDPR cookie-consent banner with per-category switches that persist to localStorage.

Callout for short, important messages with semantic variants.

Pulsing placeholder for loading content.

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.

A full-width environment or system status banner.

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

Line-coloured transit station badges (Singapore MRT, Hong Kong MTR).

A bar or ring that fills with how far the page (or a container) has scrolled.

Row of reactions with up/down vote, copy, and share actions.

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

A looping onboarding progress card with done / active / pending steps; the active bar fills over a configurable duration.

Notification cards that rest as an overlapping deck and fan into a column when toggled, via CSS-only translate/scale transitions.

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.

A whimsical countdown: a cute snail slowly crawls a track from start to finish while a seconds-remaining label ticks down, with a Start/Stop toggle and optional autostart.

A simulated multiplayer-presence overlay — labelled cursors glide around the surface along smooth paths, with an optional mode where one tracks the viewer's pointer. Token-coloured and reduced-motion safe.

Responsive data table with header, body, row and cell parts.

A table with column sorting, row selection, client-side pagination, density, sticky header, column align/type, and expandable rows.

Compact status descriptor with semantic variants.

Renders a list of badges and collapses any overflow into a compact +N badge.

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

Displays a determinate progress indicator.

Displays a keyboard key or key combination.

An interactive, collapsible JSON tree with line numbers and 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, a status stepper and a numbered install/checkout stepper.

A metric card with label, value, and a colour-coded trend delta.

Inline citation chip with a numbered badge, excerpt, and a source that links when set.

An animated LED dot-matrix display: 17 built-in animations (wave, pulse, orbit, spiral, radar, helix, snake, rain, comet, pinwheel, twinkle, …) on a square, circular, triangle or hex panel, or a static custom pattern. Single-token colour.

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

A card-wrapped panel with an optional header and a divided list of rows — leading avatar or icon, primary and secondary text, and trailing meta.

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

Responsive grid of option cards comparing arbitrary attributes and a metric, with one highlighted.

Trigger rows that expand into a centered modal panel over a blurred backdrop, with focus trapping and Escape / backdrop-click to close.

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

A single calendar event with a tone accent bar, time chip, location, attendee avatars and a join action.

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

A Twitter/X post preview with author, verified tick, post text, optional media and reply/repost/like/view metrics.

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

A chat bubble for a single conversation turn with an optional avatar and name.

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

A visual credit/debit card surface with brand mark, chip, masked number, holder and expiry across visa/mastercard/amex/generic brands and token surfaces.

A feature card backed by an animated LED dot grid that spells a word and cycles through patterns, with an optional call-to-action.

A fanned stack of app icons that expands into a selectable row, with store badges and a download button that unlocks once an app is chosen.

An Apple-invites-style list of event cards — photo backdrop, status badge and attendee avatars — that reorder by pointer drag or keyboard.

An expandable job-posting card — logo, title, salary, location and tag badges — that reveals a description and apply button on demand.

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

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

Visualise segments of a whole with proportional widths and variants.

Calendar contribution grids — a configurable heatmap and a GitHub-style activity graph with a less/more legend.

A static SVG flow chart positioning box, pill and diamond nodes on a col/row grid, joined by labelled arrowed edges.

A dependency-free SVG network graph — clustered nodes at precomputed positions, degree-scaled radii, group-coloured, with hover tooltips.

A static SVG organization chart laying out a nested name/role tree top-down with orthogonal reporting-line connectors.

A static nested outline rendering a tree as indented rows with guide lines, chevron/leaf markers and right-aligned meta.

A static SVG mind map — a central topic radiating into balanced left/right branches with stacked child nodes and token-coloured links.

A dependency-free SVG Ishikawa cause-and-effect diagram — a spine to an effect head with category bones above/below and sub-cause twigs.

An interactive MapLibre GL map with free CARTO light/dark basemaps (no API key) that flip with the theme, plus a declarative-children contract for markers, popups, routes, arcs, clusters and a heatmap.

Declarative zoom, compass, geolocate, fullscreen and scale controls for a map, placed at a corner.

A token-coloured map pin at a [lng,lat] — optionally draggable, pulsing, labelled and with a popup.

A standalone popup anchored at a coordinate, not tied to a marker.

A polyline drawn through an ordered list of coordinates — directions, trails or connections.

A curved great-circle connection between two coordinates — flight paths and origin→destination flows.

A clustered point layer for large datasets — points group into count bubbles and split apart as you zoom.

Renders a scannable QR code from any string client-side with no npm dependency, themed via currentColor.

Selectable 2×2 grid of image options with a highlighted choice.

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

A responsive image grid with multi-select — toggle tiles to ring + check them while an action bar tracks the count and clears the selection.

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

A horizontal row of image panels where the active panel expands and the rest shrink — hover or click to activate, with full keyboard operation and aria-expanded.

A working player around a native <audio> element: play/pause, a seekable scrub-bar with times, playback-rate cycling and a mute toggle.

A seekable media scrubber with a fill, drag thumb and optional time read-outs. Pointer + keyboard seek, RTL-aware, event-driven.

A voice-agent audio bar visualizer reacting to state (idle/connecting/listening/thinking/speaking). Synthetic demo by default, optional live mic.

A real-time audio waveform on canvas (scrolling or static) driven by the live microphone, with a synthetic demo fallback. DPR-aware.

A decorative orb with four token-coloured looks via a `variant` prop: liquid (a breathing WebGL voice-assistant sphere reacting to agent state), gradient (a CSS eclipse with a luminous breathing rim), particle (a rotating fibonacci-sphere point cloud), and geometric (a rotating lat/long wireframe). DPR-aware, reduced-motion safe.

A voice-dictation widget: a circular mic toggle centred in a halftone dot-cloud radial visualiser, with an aria-live transcript that types in word-by-word (synthetic demo by default; optional live SpeechRecognition).

A lightweight contenteditable rich-text surface with a toolbar slot, marks, block types and a reactive selection state other editor parts bind to.

A fixed formatting toolbar for the editor — turn-into block menu, mark toggles, lists, link and a more menu, wired to the editor by scoped events.

A selection bubble toolbar that follows the caret rect and exposes the common marks on highlighted text.

A filterable “/” command menu for inserting and transforming blocks, with keyboard navigation.

A floating @/# mention autocomplete that filters people and inserts a mention token into the editor — the editor-host counterpart of the slash menu.

A dropdown that converts the current block to a heading, list, quote or code block.

A gutter control cluster — an add button and a drag handle that opens a block options menu (turn into, duplicate, delete).

A drop-cursor line that marks where a dragged block will land, auto-tracking the nearest gap in the editable region.

A floating link editor with edit and preview states — apply, open, edit and unlink.

A text and highlight colour picker whose swatches resolve design tokens to real colours at runtime.

A searchable emoji picker with category tabs that inserts a glyph into the editor.

A LaTeX math element rendered with KaTeX, in inline or block display mode, with a graceful raw-expression fallback.

A media element renderer for the editor — image, video, file and embed figures with an optional caption.

Row and column handles that overlay a table for selecting, inserting and deleting rows and columns in the editor.

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

An inline comment thread with avatars, replies, a composer and a resolve state.

A track-changes suggestion with inserted/deleted marks and accept/reject controls.

An AI command menu with quick actions and an accept/discard result preview (local demo, no network).

A compact tile previewing a file by type — distinct token-styled icons for PDF, Office, CSV, image and archive files, or an inline image preview.

A drag-and-drop upload dropzone with multi-file selection, type/size validation, per-file progress and removal.

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

A visual JSON-Schema builder for document extraction — nestable typed fields with a live schema preview.

A macOS-Finder-style document browser with a folder tree, breadcrumb navigation, grid/list views and keyboard selection.

A page-thumbnail rail and outline tree that pairs with a PDF viewer to navigate large documents.

Renders a PDF page with token-styled citation boxes overlaid, cross-linking extracted values to their source region.

A page-thumbnail grid for partitioning a PDF into multiple output documents by inserting split points.

Pro editing surfaces for documents and spreadsheets.

A signature capture with draw (canvas) and type modes, token-derived ink, and a hidden input carrying the signature for form submit.

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

Completion status card showing the stop reason and token count.

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

Collapsible reasoning panel revealing the model's intermediate thoughts.

Next-token probability debugger with per-token bars and percentages.

A modal whose open state entangles a Livewire boolean property at runtime, so the server can open/close it and a trigger pushes back. Requires Livewire 3.

Tabs whose active value entangles a Livewire property at runtime, so the server can switch tabs and a click pushes the value back. Requires Livewire 3.

A server-driven toast listener that subscribes to a Livewire browser event and shows a transient, auto-dismissing notification on dispatch. Requires Livewire 3.

A form-field wrapper that renders the slotted control with its label, hint and the matching Livewire validation message from the shared $errors bag. Requires Livewire 3.

A confirm-then-act button that opens an inline confirmation and, on confirm, invokes a Livewire action at runtime via $wire.call. Requires Livewire 3.

A debounced search input that entangles a Livewire property at runtime, so each keystroke drives a server-side query and a server-set value updates the input. Requires Livewire 3.

A server-driven table for Livewire 3: wire:click column sorting with aria-sort, a debounced live search, a per-page selector, server pagination, optional row selection, and an empty state.

Read-only code-output card with a language tag, an optional actions slot, and a copy-to-clipboard button.

A compact single-line code snippet with an optional label and an inline copy button.

A tabbed CLI command block that switches between npm, pnpm, yarn and bun, remembers the choice, and copies it.

A code diff visualiser with unified or split layouts, a change summary and copy-to-clipboard.

A documentation table listing component props with colour-coded type tokens, defaults and descriptions.

A grid or scale strip of colour swatches with name/value labels and per-swatch copy, for design-system docs. Supports a heading label and a vertical scale orientation.

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

A release/version badge with tag, name, date, asset count and a pre-release marker, as a pill, row or card.

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

A human-readable cron-expression visualiser with a plain-English summary, field breakdown and next runs.

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

A GitHub star button linking to a repo with the mark, a label, and a formatted star-count pill — prop-driven, no live fetch.

A dev-only badge that shows the active Tailwind breakpoint — no JavaScript.

A self-updating relative timestamp on a semantic <time> element (just now / 5m ago / on 14 Jun), with a correct server-side first paint and interval refresh.

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 two colours with an AA/AAA/Fail grade — luminance computed from hex, or overridden for APCA/pre-computed values.

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

A drop-in slide-out panel that lets end users re-theme your app live — preset swatches, a radius slider and a light/dark toggle, persisted to localStorage.

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

A decorative equalizer-style row of gradient bars that pulse on a staggered loop as a hero backdrop.

An animated dithered gradient background rendered on a 2D canvas with Bayer-matrix ordered dithering; colors derive from semantic tokens by default.

A grid of short lines that each rotate to point toward the cursor, creating a magnetic-field look.

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 of falling glyph columns with a bright head and fading trail, in a semantic token color.

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

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 backdrop of slow volumetric god-rays sweeping from a focal point; the ray colour follows the --primary token at runtime. Decorative, aria-hidden, reduced-motion-safe.

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

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; DPR-aware and reduced-motion safe.

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

A full-width band of seamlessly scrolling text that accelerates with scroll velocity and flips direction with scroll direction.

An airport/train departure board that flips each character cell through the charset to its target glyph; reuses the flip-clock split-flap mechanism.

Text with a bright highlight that sweeps across it on a loop, built from semantic tokens. Pure CSS, motion-safe.

A decorative SVG that writes the word “hello” in flowing cursive, drawn stroke-by-stroke via an animated stroke-dashoffset.

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, themed via semantic tokens, with a fully-drawn reduced-motion fallback.

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

An infinite, seamless scrolling row with fade, direction and pause-on-hover.

A scroll container that fades its edges to signal more content.

Countdown timers — a mechanical split-flap board and boxed unit cards with rolling digits.

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

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

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

A coverflow-style collection browser 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 where 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.

A card whose two halves split apart on scroll to reveal inner content between them.

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

An interactive rotating globe drawn on a canvas — a dotted graticule sphere with plotted lat/long markers and faint arcs, drag to spin. Token-coloured, DPR aware and reduced-motion safe.

A generic pointer-tracked 3D-tilt wrapper for any content — perspective rotation toward or away from the cursor, a slight scale-up and a soft token-coloured spotlight glare.

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