Z
Zyeon-AI/zyeon-ui-components
AccordionaccordionA zero-dependency accessible disclosure list — single or multiple expansion, grid-rows animation, and full APG keyboard support.
Activity Heatmapactivity-heatmapA GitHub-style contribution grid — daily counts as a five-step color scale over a windowed week-by-week calendar, with four data states.
Address Formaddress-formA postal address form driven by a country rule table: per-country field set, field order and labels, state dropdown or free text or nothing, postal codes that are required, optional or absent, blur-time validation, correct autocomplete tokens, and an announced clear when a value cannot follow you to the next country.
Animated Beamanimated-beamConnect two interface nodes with a responsive animated SVG beam.
Animated Listanimated-listA flex column that staggers items in on first mount, pops in new entries, and exits removed ones while the rest smoothly re-flow into place.
Animated Tabsanimated-tabsA controlled tab strip with a sliding active indicator — underline and pill variants animated via motion layout animation.
Animated Textanimated-textCharacter-level text animation — typewriter, scramble and flowing gradient variants in one component.
Animated Tooltipanimated-tooltipA self-contained hover/focus tooltip with a spring pop-in, reduced-motion fallback and an arrow callout — no Radix dependency.
AnnouncementannouncementA compact inline announcement link with an optional label, icon and directional CTA cue.
API Endpointapi-endpointA collapsible API reference card with a monochrome-safe method badge, grouped parameter tables, expandable response examples, and a generated Copy-as-cURL command that reports failure honestly.
API Key Fieldapi-key-fieldA settings-page secret field with fixed-length masking, reveal/hide with optional auto re-mask, copy-to-clipboard with a visible failure fallback, and a two-step confirm before regenerating.
App Launcherapp-launcherA nine-dot app switcher: a grid button that drops a portalled tile grid of real links, with arrow-key grid navigation, groups, pinned and recent rows, and a search box once the suite outgrows a 3x3.
Audio Playeraudio-playerA minimal token-styled audio player card — play/pause, seek, and mm:ss time over a native <audio> element.
Audio Visualizeraudio-visualizerA real-time AnalyserNode visualizer — spectrum bars, oscilloscope, radial ring or segmented level meter, driven by a stream, an audio element or an analyser you own.
Audio Waveformaudio-waveformA canvas amplitude waveform with a click/drag/keyboard seek slider — takes precomputed peaks or decodes a src itself, highlights regions, and stays a controlled display while your own audio element plays.
Audit Trailaudit-trailA compliance-grade activity log — one readable sentence per event, day separators, expandable before/after diffs, and real loading/empty/error states.
AuroraauroraAn animated aurora-gradient background container — theme-token blobs drifting in pure CSS.
Autosize Textareaautosize-textareaA textarea that grows with its content via CSS field-sizing with a scrollHeight-based JS fallback, capped between minRows and maxRows.
Availability Pickeravailability-pickerA week × time-slot grid you brush to declare when you are free — paint/erase drag strokes, keyboard painting, blocked slots and an optional group heatmap.
Avatar Groupavatar-groupAn overlapping avatar stack with ring cutouts, letter fallbacks for broken images, and a computed +N overflow chip.
BannerbannerA page-top announcement bar with info, accent and destructive variants, a real action link and consumer-owned dismissal.
Bento Gridbento-gridA responsive tiling layout of mixed-size feature cards, with a pointer-tracked glow and honest click affordances.
Border Trace Buttonborder-trace-buttonA native button with an animated border trace and reduced-motion fallback.
Bottom Navbottom-navA mobile tab bar with badges, safe-area padding and an indicator that measures the active item and glides to it.
BreadcrumbsbreadcrumbsAn accessible breadcrumb trail with collapsible overflow — first item + ellipsis + last items once maxItems is exceeded.
Bulk Action Barbulk-action-barA floating toolbar that mounts once rows are selected — inline actions, an overflow "More" menu, and a live-announced count.
CalloutcalloutAn inline highlight box for docs, forms and explanatory copy — info, success, warning and danger variants with a tinted accent bar and default icon per variant.
Camera Capturecamera-captureA real getUserMedia webcam capturer — live preview, countdown shutter, mirrored canvas export, and a keep/retake review that returns a JPEG Blob.
CarouselcarouselAn embla-powered slide carousel with autoplay (hover-pause, reduced-motion aware), looped or bounded navigation, arrow buttons and synced pagination dots.
Changelog Listchangelog-listUser-facing release notes — one block per version, entries grouped by kind with an icon and a word, a sticky version rail on wide containers and real per-release permalinks.
Area Chart (Stacked)chart-area-stackedA four-state stacked area chart card whose legend chips toggle single series, re-stacking the survivors and rescaling the y-axis, with a per-series plus total tooltip.
Grouped Bar Chartchart-bar-groupedA four-state grouped bar chart that flips to horizontal rows when columns would go under 10px, textures every series so colour is never the only cue, and keeps missing readings distinct from measured zeros.
Bar Chart · Interactivechart-bar-interactiveAn interactive bar chart card with per-series big-number toggles that switch which series the bars plot.
Bullet Chartchart-bulletA four-state bullet chart: one row per KPI with its own scale, a measure bar against a target tick and qualitative bands, plus clamped off-scale markers.
Candlestick Chartchart-candlestickA four-state OHLC candlestick chart: hollow-up / solid-down bodies, wicks, doji and limit-locked sessions kept visible, and a full-OHLC tooltip.
Cohort Retention Gridchart-cohort-retentionA triangular cohort-retention table — one row per entry cohort, one column per period since signup, cells that carry both a colour-graded rate and its absolute count, with unobserved periods left blank instead of zeroed.
Donut Chart · Center Statchart-donut-statA four-state donut widget with a center stat and value/percentage legend, driven by one zod contract.
Funnel Chartchart-funnelA four-state conversion funnel: tapering bands with a minimum width, plus per-stage counts, step conversion and cumulative conversion.
Gauge Chartchart-gaugeA four-state needle dial that reads one metric against contract-driven threshold bands, with explicit boundary attribution and an out-of-range caret.
Heatmap Matrixchart-heatmap-matrixA rows × columns value grid with sequential and diverging colour scales — the diverging arms stay symmetric around the centre, the domain is fixable so two grids stay comparable, and missing values never render as zero.
Histogramchart-histogramA four-state distribution chart that bins raw values itself — auto / fixed-count / fixed-width bins with optional percentile reference lines.
Multi-Series Line Chartchart-line-multiA four-state multi-series line chart whose shared crosshair reads every series at the hovered x, ranked by value, with null gaps left broken.
Radar Comparison Chartchart-radar-compareA four-state radar chart comparing two or three subjects across mixed-unit dimensions: each spoke is normalized 0-100 while the tooltip keeps the raw values.
Radial Progress Chartchart-radial-progressA four-state radial progress card: one concentric ring per metric against its own target, a summary number in the hole, and over-target rings capped at one lap with truncation marks instead of drawing through.
Range Area Chartchart-range-areaA four-state range-area card: a center line inside one or two nested uncertainty bands, with contradictory bounds repaired and disclosed instead of drawn as crossed polygons.
Sankey Diagramchart-sankeyA four-state Sankey diagram that checks the books before it draws: flow conservation per node, cycle detection, longest-path layering, cross-layer ribbons and a minimum ribbon width, with an sr-only flow table.
Scatter Chart (Quadrants)chart-scatter-quadrantA four-state decision-matrix scatter chart: median or fixed crosshair, labelled tinted quadrants, collision fan-out and a screen-reader data table.
100% Stacked Bar Chartchart-stacked-bar-pctA four-state 100% stacked bar chart with largest-remainder rounding, so every bar's percentages add up to exactly 100.
Step Line Chartchart-step-lineA four-state step chart for discrete state over time — values hold flat then jump, with three step alignments, change markers and a change table.
Waterfall Chartchart-waterfallA bridge chart of floating bars — derived opening/subtotal/closing anchors, hatched decreases, running-total connectors, slot-aware ticks and real loading/empty/error states.
Chat Bubblechat-bubbleA single message bubble with role-based alignment and color, an avatar slot, and a bouncing typing indicator for assembling chat message lists.
Chat Threadchat-threadA contract-driven conversation stream — sender grouping, day and unread dividers, streaming append, load-older with position kept, and a scroll that never gets stolen from the reader.
Checkbox Treecheckbox-treeA multi-select hierarchical picker: parent↔child cascade with derived indeterminate parents, WAI-ARIA tree keyboard navigation, disabled subtrees, and search that auto-expands the path to every hit.
Choice Cardschoice-cardsA card-shaped radio or checkbox group — icon, title, description and badge per option, with roving-tabindex keyboard selection.
Circuit Boardcircuit-boardA seamlessly tiling PCB backdrop — seeded traces with 45°/90° corners, pads, vias and component footprints, plus an optional signal pulse.
Code Blockcode-blockA copyable code panel with its own minimal regex syntax highlighter — line numbers, line highlighting, tabs and a wrap toggle, no external highlighting engine.
Color Pickercolor-pickerA hex-driven color picker with a saturation/value area, hue and alpha sliders, format-aware text input, swatches, and an optional eyedropper.
ComboboxcomboboxA searchable dropdown selector — single or multi-select, grouped, creatable, with keyboard-driven filtering and chip overflow.
Command Palettecommand-paletteA ⌘K-style command palette — portal dialog, fuzzy subsequence search, grouped commands, recent items and full keyboard navigation.
Comment Threadcomment-threadA nested discussion tree — collapsible reply subtrees on a clickable thread line, optimistic voting, inline reply composer with a posting/failed lifecycle, controlled sorting, and a depth cap that hands deep threads off to a permalink.
Comparison Slidercomparison-sliderA draggable before/after comparison slider with clip-path reveal, pointer capture and full keyboard support.
ConfetticonfettiA DOM-particle celebration burst layer — bump a counter to fire a delta-time normalized confetti burst inside a relative container.
Confirm Dialogconfirm-dialogOne confirmation dialog for every destructive action — async pending, inline failure and type-to-confirm.
Conflict Resolverconflict-resolverA field-level three-way merge for concurrent edits — base/mine/theirs per field, only the genuinely conflicting fields asked about as radiogroups, bulk fill with per-field override, and a merged record on submit.
Connection Statusconnection-statusAn online / offline / reconnecting bar with an exponential-backoff retry countdown, a manual retry button and SSR-safe browser subscription.
Context Menucontext-menuRight-click, long-press or Shift+F10 menu that opens at the pointer — checkboxes, submenus, typeahead, and flipping bounded by the nearest clipping ancestor.
Cookie Consentcookie-consentA bottom-fixed cookie consent card with slide in/out animation that persists the visitor's accept/decline choice to localStorage.
Copy Buttoncopy-buttonA ghost icon or label button that writes text to the clipboard and flashes a timed "Copied" confirmation.
Corner Ribboncorner-ribbonA diagonal corner badge draped over a card — NEW / SALE / POPULAR callouts that wrap any card content.
CountdowncountdownA ticking days/hours/minutes/seconds countdown for launches and promotions, with a one-shot onComplete callback and SSR-safe hydration.
Credit Cardcredit-cardA flippable bank card display with a masked number, holder and expiry on the front, magstripe and a hidden CVC placeholder on the back.
Credit Card Formcredit-card-formCard entry with brand-aware grouping and maxLength, a Luhn check, MM/YY with a real expiry rule, blur-time errors, auto-advance and correct cc-* autocomplete — UI only, real payments belong in a PCI-compliant hosted field set.
Cron Inputcron-inputA visual five-field cron builder — presets, hour/minute selects and weekday/month chips write the expression, pasting one parses back into them, with a plain-English summary and the next runs.
CSV Importcsv-importA three-step CSV importer — RFC 4180 parsing (quoted delimiters, embedded newlines, doubled quotes), delimiter and BOM detection, auto-guessed column mapping with duplicate and required-field gates, and a capped preview that reports ragged rows by line number.
Currency Inputcurrency-inputA money field that stays raw while you type and normalizes with Intl.NumberFormat on blur — grouping, fixed decimals, clamping, and a number | null value.
Data Grid Editabledata-grid-editableA spreadsheet-style editable data grid — per-column cell editors, roving-tabindex keyboard navigation, per-cell validation, async commits that show pending and roll back, TSV paste, sticky header and first column, plus real loading/empty/error states.
Data Tabledata-tableA contract-driven interactive data table — controlled sort, tri-state row selection, sticky header, row actions, and real loading/empty/error states.
Date Range Pickerdate-range-pickerA two-month range calendar with preset shortcuts (Today, Last 7/30 days, this/last month), hover preview and no date-library dependency.
Description Listdescription-listA semantic key-value list for order details, profile echoes, and settings summaries, in a divided-rows or panel-grid layout.
Device Framedevice-frameA CSS-only phone or browser shell — drop a screenshot or a live component into a mockup for marketing pages, no iframe.
Diff Confirmdiff-confirmA confirmation dialog that shows the change list first — grouped create/update/delete counts, expandable before → after rows, type-to-confirm past a destructive threshold, and a failure state that keeps the plan on screen.
Diff Viewerdiff-viewerA GitHub-style text diff — unified or side-by-side, own LCS line matching with word-level highlights, foldable context, a pinned line-number gutter and guards for huge inputs.
Dimension Inputdimension-inputA paired width × height field with an aspect-ratio lock that freezes the ratio when you lock it, clamps both sides against min/max, and ships swap plus size/ratio presets.
DockdockA macOS-style dock with proximity-based icon magnification, spring physics and hover label bubbles.
Download Buttondownload-buttonA download CTA that fills like a liquid gauge as the transfer advances, then settles into a checked or retryable state.
DrawerdrawerA gesture-driven drawer for any edge — snap points, velocity-based settling, scroll-aware pull-to-close, focus trap and refcounted scroll lock. No vaul.
Dropdown Menudropdown-menuA generic dropdown menu — any trigger, structured rows (commands, checkboxes, radio groups, submenus), typeahead and clipping-aware placement.
DropzonedropzoneA native drag-and-drop file picker with accept/size/count validation, inline rejection reasons and a removable file list.
Duration Inputduration-inputA duration field normalized to seconds — carrying h/m/s spinbutton segments (type 90 minutes, get 1h 30m) or a free-text mode that parses "1h30", "90m" and "1:30".
Effect Buttoneffect-buttonOne button, seven visual effects (shimmer, shine, spotlight, glow, gradient, glass, ripple) as cva variants.
Emoji Pickeremoji-pickerA full emoji panel — 554 built-in emoji in 8 categories with bilingual search, skin tones, recents and a windowed arrow-key grid, inline or portalled beside a trigger.
Emoji Reactionemoji-reactionA reaction bar of tallied emoji chips plus a keyboard-navigable picker for adding one more.
Empty Stateempty-stateA centered empty-state panel with an icon chip, title, description and up to two actions — link actions render RSC-safe, onClick actions need a client boundary.
Environment Variablesenvironment-variablesReview, reveal, and copy environment variables with sensitive values masked by default.
Error Boundaryerror-boundaryA real React error boundary — keyed remount on reset, automatic recovery when resetKeys change, a consecutive-failure guard, onError reporting with the component stack, and dev-only stack details.
Error Stateerror-stateAn error panel — inline/card/page density, safe unknown-error extraction, collapsible stack trace, a copyable error code and a real retry pending state.
Event Cardevent-cardAn event card whose calendar tear-off survives cross-day, cross-month and cross-year spans, formats every instant in an explicit IANA zone, and drives an ordered capacity machine where ended outranks the seat count.
FAB Menufab-menuA floating action button that fans a labelled column of secondary actions upward, with staggered entry and focus handling.
Feature Tablefeature-tableA contract-driven feature comparison matrix across plans or versions, rendered as a real semantic table with four data states.
Feedback Widgetfeedback-widgetA corner or inline feedback launcher with a sentiment radiogroup, category chips, message and optional email, driven by an idle → submitting → success → error submit state machine.
File Previewfile-previewA preview card for any single file — image/video thumbnails, a working audio play bar, type icons with MIME-or-extension metadata, card/row/tile variants and leak-free object URLs.
File Treefile-treeAn accessible hierarchical file/folder tree with WAI-ARIA-nested treeitem/group markup, roving tabindex, and grid-rows expand animation.
File Upload Listfile-upload-listAn upload queue with per-file progress, pause/resume, retry, cancel and remove, a byte-weighted batch summary and throttled screen-reader announcements.
Filter Barfilter-barComposable filter bar for a table toolbar: an add-filter menu, one editable chip per active filter with its own remove button, portalled editors for select / multiselect / date-range / text / boolean, wrap-or-collapse overflow and Clear all.
Filter Chipsfilter-chipsA wrapping row of toggle chips for narrowing a list — per-facet counts, single or multi select, and a Clear all that only appears when something is on.
Flickering Gridflickering-gridRender a responsive canvas grid with subtle, reduced-motion-aware flickering cells.
Flip Cardflip-cardA two-faced container that turns over on hover or click to swap a summary for its details.
Floating Navbarfloating-navbarA header that hides on scroll-down and reappears on scroll-up, giving long reading surfaces the vertical space back without losing the nav.
Form Fieldform-fieldA label + control wrapper that injects id, aria-describedby, invalid/required state, disabled and a character counter into whatever control you nest inside it.
Form Wizardform-wizardA multi-step form state machine — per-step validation gates (sync or async), focus moved to the first bad field, and a self-contained progress rail.
Gantt Chartgantt-chartA project schedule chart — sticky task column, adaptive day/week/month axis, progress-filled bars, milestone diamonds, finish-to-start dependency elbows, collapsible groups, and real loading/empty/error states.
Git Graphgit-graphA commit-DAG viewer with reusable swimlanes — topological ordering, lane reuse after merges, orphan roots, shallow-history tails, copyable full hashes and four data states.
Glitch Textglitch-textCyberpunk glitch headline — two pseudo-element copies tear the text into slices and slide, in pure CSS, dead still under reduced motion.
Gradient Border Buttongradient-border-buttonA rotating conic-gradient ring around a solid core, so the border carries the colour and the label keeps full contrast.
Gradient Meshgradient-meshA full-bleed mesh-gradient wash — oversized blurred token blobs drifting past each other as an absolute background layer.
Gradient Pickergradient-pickerA CSS gradient editor: draggable stop rail with double-click insert, keyboard-reachable stops, an angle dial, and a read-only linear/radial/conic CSS string with copy.
Gradient Textgradient-textPolymorphic heading text painted with a token-driven gradient, optionally looping — no hex codes anywhere.
Grid Dotsgrid-dotsA zero-JS grid, dots or cross pattern background container with an optional radial fade mask — a pure server component.
Health Check Listhealth-check-listA self-diagnostics panel — one independently re-runnable probe per row, shape-plus-word statuses, expandable evidence, real fix actions and a counts-and-verdict summary.
Hex Gridhex-gridA seamlessly tiling honeycomb backdrop — outlined, tinted or vertex-dotted, with an optional edge fade and a few seeded cells breathing on CSS alone.
Highlight Markerhighlight-markerHighlighter, underline or hand-drawn circle that wipes across a phrase when it scrolls into view.
Hold to Confirmhold-to-confirmA press-and-hold confirmation button — hold past a charge bar to fire an action, guarding destructive or irreversible operations against accidental taps.
Hover Cardhover-cardA hover-and-focus card for arbitrary rich content — avatar, stats, links, buttons — with an open delay, a close grace period the pointer can cross into, clip-aware flipping and tap-to-toggle on touch.
Image Annotationimage-annotationClick-to-pin image annotation — numbered draggable markers with notes, stored as percentages of the image so they never drift when it resizes.
Image Cropperimage-cropperA drag/zoom/rotate image cropper with pointer + keyboard control that exports a real cropped Blob via canvas.
Image Placeholderimage-placeholderA progressive image loader — skeleton, blur-up or color placeholder, a 400ms cross-fade on load and an error panel when the URL fails.
Image Zoomimage-zoomA clickable thumbnail that opens a full-screen lightbox with a fade + scale transition, Esc/backdrop/click-to-close, and focus management.
Inbox Listinbox-listA triage-ready message list — unread by weight and dot, Shift-range multi-select with a bulk bar, keyboard shortcuts, hover-and-focus row actions, and real loading/empty/error states.
Inline Editinline-editClick-to-edit text that swaps a button for an input in place — pending state on async saves, rollback with the failure reason, and no width jump.
Inline Error Summaryinline-error-summaryA top-of-form error summary whose rows scroll to and focus the field they name — persistent polite live region, self-focusing panel, onNavigate hook for collapsed fields and a maxVisible overflow count.
Invoice Summaryinvoice-summaryAn invoice / order total block — line items (quantity × unit), discounts, taxes with rates, shipping, total and amount due, all in integer minor units, with full and compact variants and four data states.
JSON Editorjson-editorAn editable JSON textarea with live syntax validation, exact line/column errors marked in a synced gutter, optional schema checking, and format/minify/copy/reset tools.
JSON Viewerjson-viewerA collapsible, searchable JSON tree viewer with type-colored values, per-node copy value/path, and safe rendering of circular refs and every JS edge-case value.
Kanban Boardkanban-boardA contract-driven kanban board — dnd-kit drag and drop across and within columns, keyboard-accessible moves with live announcements, WIP limits that block over-filling, per-column scrolling, and real loading/empty/error states.
KbdkbdKeycap and key-combination display — semantic `<kbd>` markup with platform-aware glyphs (mod resolves to ⌘ on mac, Ctrl on windows).
Keyboard Mapkeyboard-mapA keyboard layout diagram with your app's shortcuts painted onto the caps — platform-correct glyphs and modifier order (⌘ ⌥ vs Ctrl Alt), whole-chord highlighting, and a readable binding list.
Language Pickerlanguage-pickerA locale field that lists every language under its own name — 简体中文 beside Chinese (Simplified) — searchable by endonym, English name or BCP 47 tag, with RTL rows rendered in their own direction, optional translation completeness and a browser-language matching ladder.
LeaderboardleaderboardA ranked standings board — podium tiers, rank-change arrows, a highlighted current-user row with a pinned "your rank" bar, and real loading/empty/error states.
Light Beamslight-beamsAngled shafts of light falling from the top edge, each breathing on its own tempo and fading out before the bottom.
Lightbox Gallerylightbox-galleryA thumbnail grid that opens a full-screen lightbox with arrow navigation, a counter, captions and focus return.
Like Buttonlike-buttonA social toggle that fills its icon, bursts a ring of particles and rolls the counter on every tap.
Link Previewlink-previewAn inline link that reveals a hoverable preview card — thumbnail, title, description and domain — with edge-aware flipping and touch-safe degradation.
Loading Overlayloading-overlayA scrim that freezes one region or the whole viewport while work is in flight — delay-gated so short requests never flash, held for a minimum so it never blinks out, and inert underneath so Tab cannot walk into the frozen form.
Log Viewerlog-viewerA runtime log console — level filters with counts, search highlighting with hit-to-hit jumps, tail-follow that pauses on manual scroll, and windowed rendering for huge buffers.
Magnetic Buttonmagnetic-buttonA button that drifts toward the cursor within a sensing radius and springs back on leave, with a subtle reverse-parallax label.
Markdown Editormarkdown-editorA textarea-based Markdown editor with a selection-aware toggling toolbar, ⌘B/⌘I/⌘K shortcuts, write/preview/split modes and a dependency-free preview renderer.
MarqueemarqueeA pure-CSS infinite scrolling belt for logo walls and testimonial strips — seamless loop, edge fade and hover pause.
Masked Inputmasked-inputA pattern-masked text field — 9/A/* slots with literal separators, masked and raw value on every change, and caret-preserving edits in the middle of the string.
Masonry Gridmasonry-gridA pure-CSS waterfall grid container that arranges children into responsive columns via break-inside-avoid wrappers, no measuring or JS required.
Media Grid Selectablemedia-grid-selectableA multi-select photo/video grid with Shift range, cmd/ctrl toggle, two-dimensional arrow-key navigation, a selection cap, lazy thumbnails and type-icon fallbacks.
Mega Menumega-menuA site nav bar whose entries drop a wide multi-column sheet across the whole navbar — portalled past clipping ancestors, hover intent with instant lateral switching, and an automatic accordion fallback.
Mention Inputmention-inputA plain-text textarea where a trigger character (default @) opens a caret-anchored, filtered picker — mentions, or repurposed for slash commands.
MeteorsmeteorsA decorative diagonal shooting-star field for hero/card backdrops — deterministically scattered, pure CSS.
Metric Comparisonmetric-comparisonA period-over-period comparison table — current, previous, absolute change and change %, with polarity-aware tone, sortable columns, expandable breakdowns and four data states.
Mini Calendarmini-calendarA compact month grid for picking one date — keyboard-navigable, timezone-safe, with today, disabled days and event dots. No date library.
Mini Mapmini-mapA thumbnail navigator for any scroll container — a draggable viewport box over an auto-measured (or custom-drawn) silhouette, kept in sync by a passive rAF-throttled listener that writes transform straight to the DOM.
Model Selectormodel-selectorAn LLM model picker whose options carry context window, per-million input/output rates, capability badges and real availability — and can be filtered and sorted by them.
Nav Railnav-railA narrow vertical icon navigation bar that widens into a labelled column — keyboard-reachable tooltips, top/bottom zones, badges and a controllable expanded state.
Noise Texturenoise-textureAn SVG turbulence grain layer that gives flat fills and gradients the tooth of print — optionally jittering like film.
Notification Badgenotification-badgeA count bubble that wraps any element — rolling digits, a bump on change, max overflow, dot mode with a ping, and four corner placements.
Notification Centernotification-centerAn inbox popover for the app bell — grouped rows, tab filters, per-row and bulk read management, clipping-aware placement, and real loading/empty/error states.
Number Inputnumber-inputA capsule quantity stepper with a decrement/increment button either side of a directly-editable, clamped numeric field.
Number Tickernumber-tickerA count-up number that eases from 0 to its target the first time it scrolls into view — Intl-formatted with prefix/suffix.
Onboarding Touronboarding-tourA spotlight-style product walkthrough that dims the page, cuts a rounded hole around each step's real target, and positions an auto-flipping tooltip card beside it.
Org Chartorg-chartA recursive org/hierarchy chart drawn with pure-CSS connector lines (sibling bus trimmed at both ends), collapsible subtrees, vertical or horizontal orientation, renderNode-swappable cards, and a keyboard-navigable WAI-ARIA tree that scrolls inside its own box instead of overflowing.
OTP Inputotp-inputA segmented verification-code field with auto-advance, paste-to-fill, optional grouping and masking.
Package Infopackage-infoDisplay package versions, dependency groups, and upgrade status in a compact metadata panel.
Page Headerpage-headerAn app-shell page header — breadcrumb slot, icon, title, status meta and actions that wrap instead of squeeze, plus an optional controlled tab strip.
PaginationpaginationPage-number navigation with a sliding sibling window, edge pinning, and an ellipsis only when the page count actually needs one.
Cursor Paginationpagination-cursorA load-more control for cursor APIs — a synchronous in-flight guard so one cursor is never fetched twice, an optional intersection sentinel with a burst budget, retry that keeps the loaded rows, and a live-region count.
ParticlesparticlesAn interactive canvas particle field — dots, linked constellations, snow or fireflies that follow your text token and scatter from the pointer.
Password Inputpassword-inputA styled password field with a show/hide toggle and an optional heuristic strength meter.
PDF Viewerpdf-viewerA document viewer shell with a pluggable render layer — controlled paging synced to scroll, fit-width/fit-page zoom that re-fits on resize, thumbnail rail, text search, keyboard and pinch, named loading/404/damaged/encrypted states, and a native <object> fallback.
Percent Allocatorpercent-allocatorSplit a total across rows with largest-remainder rebalancing, per-row locks and min/max limits — the shares always add up to the target exactly.
Permission Matrixpermission-matrixAn editable roles × permissions grid: tri-state cells (allow / deny / inherit), collapsible permission groups, a pinned permission column, locked system-role columns, row/column bulk edits, and real loading/empty/error states.
Permission Promptpermission-promptA pre-permission explainer card that says why camera, microphone, location, notification or clipboard access is needed before the browser's one-shot dialog is spent, with per-permission recovery steps and a retry once it's blocked.
3D Marqueeperspective-marqueePresent media tiles in a responsive perspective marquee with explicit data states.
Phone Inputphone-inputA country dial-code picker fused to a number field — searchable self-drawn listbox, keyboard driven, emitting an E.164 string on every change.
Photo Stackphoto-stackA tilted deck of photos — drag, click or arrow-key the top one away and it cycles to the bottom, forever.
Pin Padpin-padA touch-first numeric keypad for PIN entry: 44px keys, masked dot indicator, deterministic shuffled layout, keyboard parity, and pending/error states.
Poll Resultspoll-resultsA poll / survey result readout — one bar per option with largest-remainder percentages that always total exactly 100%, tie-aware leader badges, a your-vote marker, and a ballot view that hides the counts until the visitor votes.
PopoverpopoverA click-triggered floating panel that portals past clipping ancestors, then flips, shifts and size-caps itself against the nearest scrollable boundary.
Product Cardproduct-cardA storefront product card: one stretched link over the whole card, variant swatches that swap the photo, a discount derived from the was-price, a sold-out veil and a four-phase Add to cart that never fakes success.
Profile Cardprofile-cardOne person card in three densities — vertical, horizontal and compact — with presence dot, badges, stats, a stretched-link name and initials fallback.
Progress Meterprogress-meterOne progress contract in two geometries — a linear bar or a compact ring, each with determinate and indeterminate modes, four tones and four sizes.
Prompt Inputprompt-inputAn autosizing chat input with paste/drag/pick attachments, a streaming Send⇄Stop button, IME-safe submit and a character counter.
QR Codeqr-codeA tokenized QR code renderer — encodes any string to SVG and inherits currentColor, auto-inverting in dark mode.
QR Scannerqr-scannerA camera QR reader on the native BarcodeDetector with a pluggable decoder — an enforced scan frame, a throttled decode loop, a per-value cooldown, an image fallback, and a camera that is always released.
Query Builderquery-builderA recursive AND/OR condition tree — operator menus follow the field's type, any condition can be turned into a nested group up to a depth cap, and a read-only SQL-ish expression shows what the tree means.
Range Sliderrange-sliderA two-thumb range selector with a minimum gap, value bubbles, marks and full keyboard control.
Rate Limit Noticerate-limit-noticeA 429 panel whose cooldown recomputes from an absolute target instant, so a suspended tab wakes up to the right number — auto-unlock with milestone-only announcements and no auto-retry, remaining quota with icon/word/outline urgency, consecutive-backoff labelling and an upgrade CTA.
RatingratingAn accessible star rating input (whole or half steps) that doubles as a fractional read-only display.
Rating Summaryrating-summaryA read-only review digest: average score, fractional stars and five distribution bars that double as star-filter toggles, plus a no-reviews state.
Read Moreread-moreA line-clamped text block with an expand/collapse toggle that only appears when content actually overflows.
Recurrence Pickerrecurrence-pickerA calendar-language repeat editor that writes an RFC 5545 RRULE — frequency, interval, weekday chips, "second Tuesday" / "last day of the month", and a Never / N times / until-date ending — with the next dates previewed from the same rule evaluator.
Redacted Textredacted-textBlur, black-bar or character-mask a sensitive string with hover / click / press-and-hold reveal — where mask actually removes the plaintext from the DOM.
Relative Timerelative-timeAuto-refreshing 'time ago' text rendered as a real <time> element, formatted with Intl.RelativeTimeFormat and hydration-safe via useSyncExternalStore.
Repeater Fieldrepeater-fieldA generic controlled array field — add, remove, move and drag-sort rows of any shape, with min/max clamping and stable row ids that never remount a focused input.
Request Waterfallrequest-waterfallA DevTools-style network waterfall — one adaptive time axis, bars segmented by DNS/connect/TLS/TTFB/download, hover-or-focus phase breakdowns, duration sorting, and real loading/empty/error states.
Resource Usageresource-usageA quota panel for heterogeneous resources — per-unit formatting (1024-based bytes, throughput, duration, cores, counts, money), unlimited rows with no bar at all, rescaled over-quota tracks, collapsible groups and usage sorting.
Retro Gridretro-gridAn 80s synthwave floor — a tiled grid laid flat in perspective, scrolling toward the viewer and dissolving into the horizon.
Rich Text Toolbarrich-text-toolbarAn editor-agnostic formatting bar: grouped toggle buttons that never steal the editor's selection, collapse into an overflow menu by measurement, and walk on a single tab stop — plus a floating variant that follows the selection.
Ripple Ringsripple-ringsConcentric ripples expanding out of one origin — a pure CSS/DOM backdrop with an optional pointer-following origin and a static reduced-motion fallback.
Save Indicatorsave-indicatorAutosave status line for an editor toolbar — Saving… holds a minimum beat to avoid flicker, Saved fades back into "Last saved 3 minutes ago", and errors stay put with a Retry.
Schedule Calendarschedule-calendarA day/week time grid — events placed by the minute, overlapping ones packed side by side, an all-day row, a caller-supplied current-time line, click-to-create slots and real loading/empty/error states.
Schema Displayschema-displayDocument API operations, parameters, and nested schemas in an accessible expandable view.
Scramble Textscramble-textText that lands as random characters and decodes left to right, on mount, on scroll-in or on hover.
Scroll Areascroll-areaA themed scroll container that keeps native scrolling untouched — the platform bar is hidden and a draggable thumb is drawn from scrollTop/scrollHeight, with edge fades and an end-reached callback.
Scroll Progressscroll-progressA thin fixed bar tracking page or container scroll position, written straight to the DOM with zero re-renders.
Scroll Revealscroll-revealA variant-driven entrance wrapper — fade, slide, blur or scale any children in once they scroll into view, with an optional per-child stagger.
Scroll to Topscroll-to-topA floating button that fades in past a scroll threshold and smoothly scrolls its container (or the window) back to the top.
Scrollbar Stylesscrollbar-stylesSix presets that re-skin the browser's own scrollbar in pure CSS — no JavaScript, no drawn thumb, and one capability-tiered sheet that keeps `::-webkit-scrollbar` and `scrollbar-width` from cancelling each other out.
Search Highlightsearch-highlightHighlights the parts of a text that match a search query — substring, per-word or fuzzy subsequence, with escaped queries, merged overlaps and a current-match cursor.
Search Inputsearch-inputA search field with an icon, a clear button that appears on value, an optional loading spinner, and a decorative shortcut hint.
Seat Pickerseat-pickerA zoomable SVG venue map for picking seats — section/row/seat keyboard navigation, per-seat spoken names, shape+pattern status encoding, a list fallback, max-seat and no-orphan rules.
Segmented Controlsegmented-controlAn iOS-style exclusive picker whose selected thumb slides between options, with cva sizes and full radiogroup keyboard support.
Session Listsession-listSigned-in devices with per-row and bulk sign-out — the current session is highlighted and never revocable, rejected revokes keep the row with a retry, and loading/empty/error are first-class states.
Settings Listsettings-listGrouped settings rows — label and description on the left, your own control on the right, with whole-row links, badges, disabled rows and a danger zone.
Share Buttonshare-buttonA share trigger whose targets fan out on an arc or a rail, one 40ms step apart, with outside-click and Esc dismissal.
Shiny Textshiny-textA restrained inline shimmer — one narrow light band loops across muted text, for New badges and quiet links.
Shortcut Recordershortcut-recorderA field that records a keyboard shortcut by pressing it — swallows every key while recording, waits past the modifiers for a real key, and separates browser-reserved combos (refused) from ones that would override an existing binding (recorded, with a warning).
Shortcuts Dialogshortcuts-dialogA grouped keyboard cheat sheet bound to the ? key — platform-correct keycap glyphs, token-based filtering, focus trap and a refcounted scroll lock.
Sidebar Navsidebar-navA grouped app sidebar with collapsible sections, icons, badges, an active-item indicator and an icon-only collapsed rail.
Signature Padsignature-padA canvas signature capture surface with pointer-drawn strokes, undo/clear, and a PNG data URL export.
SkeletonskeletonA loading-placeholder primitive — line, circle and rect shapes with pulse or shimmer motion — that mirrors the layout it stands in for.
Slide to Confirmslide-to-confirmA slide-to-confirm control — drag the thumb to the end of the track to fire an action, guarding destructive or irreversible operations against accidental taps.
Slug Inputslug-inputA URL field that transliterates the title as you type, detaches the moment you edit it by hand, and debounces an availability check with clickable -2 / -3 suggestions.
Sortable Listsortable-listA drag-to-reorder list (settings, playlists, priority queues) built on dnd-kit with a keyboard-sortable fallback.
Stat Card · Sparklinesparkline-stat-cardA KPI card — headline figure, tone-aware delta badge and a minimal sparkline — with four data states from one contract.
SpinnerspinnerOne indeterminate loader, seven shapes — three boxed (ring, dual-ring, bars) and four inline dot rows (dots, ellipsis, bounce, wave), with tone and count props.
Split Buttonsplit-buttonA primary action welded to an arrow segment that opens its own keyboard-navigable action menu.
Split Panesplit-paneA dependency-free resizable split layout — percentage flex-basis panes, percent or px per-pane minimums, double-click collapse, full keyboard resizing and an optional persisted layout.
SpotlightspotlightA cursor-following radial glow background container — pointer coordinates track via ref-driven CSS variables, never React state.
Stack Tracestack-traceParse, inspect, and copy stack traces while preserving unrecognized raw frames.
StarfieldstarfieldA layered parallax star field on one canvas — 2-4 depth layers drifting or warping, seeded for a reproducible sky, with a faint-dust fallback on light surfaces.
Stat Cardstat-cardA KPI grid — label, big tabular figure and a tone-coded delta per metric — with loading, empty, error and ready driven by one contract.
Stateful Buttonstateful-buttonAn action button with a built-in idle → loading → success/error state machine — stable width, live-region announcements, auto-reset.
Status Badgestatus-badgeA presence and health indicator — colored dot or tinted pill, with status colors mapped to theme tokens and an optional liveness pulse.
Status Timelinestatus-timelineA read-only progress thread for an async run — per-stage icon + word, live elapsed time on the running stage, expandable failures and a settled-run summary, vertical or horizontal.
StepperstepperA horizontal wizard progress indicator — completed steps are clickable to go back, the current and future steps never are.
Steps Checkliststeps-checklistAn onboarding checklist that tracks setup progress — togglable steps with optional CTAs, expandable detail, a progress meter and a completion celebration.
Sticky Headersticky-headerAn in-flow page header that shrinks, blurs, or hides on scroll, exposing its scroll state as data attributes for consumers to style.
Success Checksuccess-checkAn SVG outcome mark that draws its ring and then its stroke — a check for success, a cross for failure.
Swatch Pickerswatch-pickerAn accessible radiogroup of preset color swatches with roving tabindex, arrow-key navigation, and a contrast-safe selected check mark.
Tab Overflowtab-overflowA measured tab strip that folds the tabs it cannot fit into a "More" menu — real tablist semantics, the selected tab is never collapsed, and no breakpoints anywhere.
Tags Inputtags-inputA chips input for free-form multi-value entry — Enter or comma commits, paste splits, duplicates shake, maxTags caps with a counter.
TerminalterminalA terminal window that replays a scripted session — commands type out character by character, output blocks fade in, comments stay dim.
Test Resultstest-resultsSummarize test suites, outcomes, durations, and failure details across explicit data states.
Text Revealtext-revealWord-by-word or character-by-character text reveal triggered by scrolling into view, with a staggered fade-up-blur entrance.
Theme Toggletheme-toggle-buttonAn animated sun/moon theme toggle button — controlled and host-agnostic, with a rotate-and-scale icon cross-fade.
Tilt Cardtilt-cardA card container that leans toward the pointer in 3D, with an optional gloss that tracks the cursor.
Time Pickertime-pickerA segmented hour:minute input with arrow-key stepping and a clock-button dropdown, normalizing to 24-hour "HH:mm" regardless of display format.
TimelinetimelineA contract-driven vertical timeline with done, active and upcoming milestone nodes and four data states.
Timezone Pickertimezone-pickerA searchable IANA time-zone field — ~90 zones grouped Popular / All, each row showing that zone's live local time and derived GMT offset, in a portalled panel no overflow-hidden card can clip.
Toast Stacktoast-stackA self-contained toast system — newest slides in, older ones stack behind it, hover expands the pile into a list.
TOC Scrollspytoc-scrollspyAn article outline that follows the reader — headings are watched with one IntersectionObserver and a rail slides to the current section.
Toggle Switchtoggle-switchA switch with a sliding knob, Check/X icons fading inside the track, three sizes and a loading state.
Token Usage Metertoken-usage-meterAn LLM quota panel — tokens used vs quota, split by model with separate input/output prices, an exact cost estimate, days to reset and a burn-rate projection, in four contract-driven states.
Tool Call Tracetool-call-traceAn agent's tool-call tree — nested sub-calls with a capped indent, structured args and results in expandable JSON, one shared duration unit, first-class running/failed calls, and real loading/empty/error states.
ToolbartoolbarA grouped application toolbar that measures itself and folds its lowest-priority actions into a portalled "More" menu — no breakpoints, roving tabindex, pressed toggles kept intact.
Top Loading Bartop-loading-barA thin route and request bar that climbs asymptotically towards 99% while work is in flight — delay-gated so fast requests never flash, held for a minimum duration, with a controlled mode, top or bottom placement and an optional spinner.
TopographytopographyA seamlessly tiling contour-map backdrop traced from seeded hash noise — quiet relief lines for docs shells, auth screens and empty states.
Tree Maptree-mapA squarified treemap that tiles a hierarchy by value — nested groups, click-to-drill with a breadcrumb, rank-based shading and keyboard-reachable DOM tiles (no canvas).
Truncate Middletruncate-middleMiddle-ellipsis text that keeps both ends readable — a fixed head/tail cluster count, or as many characters as the measured width actually fits.
TypewritertypewriterA type-and-delete headline that cycles through a list of sentences with a blinking caret.
Typing Indicatortyping-indicatorA chat presence indicator — optional avatar, a receiver-side bubble of waving dots, and a name line that collapses for groups.
Unit Inputunit-inputA number-plus-unit field for design tokens — 12px, 1.5rem, 50% — with arrow/wheel stepping, optional conversion on unit switch, and an auto state.
Uptime Barsuptime-barsA status-page availability strip — one bar per day bucketed into operational / degraded / partial / major, with hover-or-focus incident detail and a width-aware day window.
Variant Selectorvariant-selectorMulti-dimension product options resolved against a sparse SKU matrix — impossible combinations stay visible and struck through, availability converges from either direction, and dead ends name the one dimension to change.
Version Historyversion-historyA day-grouped snapshot list — preview a version, compare two, and roll one back behind a real confirmation with pending, failure and retry.
Video Embedvideo-embedA lite YouTube/Vimeo facade — poster and play button until clicked, so the real iframe and its third-party script never load until the user opts in.
Video Hover Previewvideo-hover-previewA thumbnail card that plays a muted preview clip on hover or keyboard focus — delayed lazy load, pointer-x scrubbing, progress bar, and a poster fallback on error.
Video Playervideo-playerA custom control skin for a self-hosted <video> — pointer-capture scrubbing with preview time, buffered ranges, volume memory, speed menu, subtitles, fullscreen, PiP, keyboard shortcuts and a readable error state.
Video Timelinevideo-timelineA controlled scrub track with chapter-segmented rail, buffered ranges, keyframe hover previews and draggable in/out trim handles — delta dragging, frame-accurate keys, no player attached.
Virtual Listvirtual-listA hand-rolled windowed list — renders only the visible rows of a huge array, with fixed or measured variable heights, imperative scroll control and infinite-scroll support.
Voice Recordervoice-recorderA real MediaRecorder-backed voice recorder — live AnalyserNode waveform, pause/resume, mic-permission handling, and a listen-before-you-send preview.
WaveswavesAn SVG wave divider and layered backdrop for section transitions and hero bottoms — pure CSS, no canvas.
Word Rotateword-rotateA jitter-free rotating word inside a headline, cycling through slide or fade transitions with zero layout shift.
Workspace Switcherworkspace-switcherA workspace / organization switcher: active workspace in the trigger, grouped searchable menu in a portalled panel, pinned create and settings footer.