Primary action control (React Aria Button): press events, pending state, five visual variants.

Shared field parts. Every form control composes these so labels, help and errors look identical.

Groups related fields under one legend (Base UI Fieldset: native <fieldset>, disables all children together).

Drag-and-drop target plus a native file picker (React Aria DropZone + FileTrigger).

Button with only an icon; aria-label is required.

Numeric input with stepper buttons, locale formatting, units and currency.

One-time code input (Base UI OTP Field): paste, autofill and per-slot keyboard handling built in.

Pick a value or range by dragging or with arrow keys.

Single-line text input with label, description and validation message.

Multi-line text input with label, description and validation message.

Button that stays pressed or unpressed (aria-pressed), e.g. bold in a toolbar.

Groups related buttons visually: attached, split button or spaced.

Small icon button that closes a dialog, panel or banner (labelled "Close").

Copies a value to the clipboard and confirms with a brief "Copied" state.

A button that opens the native file picker. For drag and drop, use FileDropZone.

Native <form> with React Aria validation: field-level `validate`, `isRequired`, and server errors via `validationErrors={{ fieldName: 'message' }}`.

Text field with attached addons on either side.

Password field with show/hide toggle and an optional strength meter.

Star rating as a radio group: arrow keys change the value, each option is announced ("3 of 5 stars").

Search input with clear button, Escape to clear, and an optional shortcut hint.

Free-form tags: type and press Enter or comma; Backspace on empty input removes the last tag.

Group of ToggleButtons with single or multiple selection and arrow-key navigation.

Circular angle input (0–359°). Drag the knob or use arrow keys (Shift = 15°), Home/End.

Click-to-edit text. Preview is a button ("Edit <label>"); Enter saves, Escape cancels, blur saves. `size` sets the preview's text style (heading vs body). Saving an empty value clears it unless `required`, which keeps the old value. Enter and Escape return focus to the preview.

Emoji grid with search and category headings; arrow keys move through the grid (GridList), Enter picks. `autoFocus` focuses the search (on in the popover picker).

Floating action button. With `actions` it becomes a speed dial: the main button toggles a stack of labelled mini-buttons (aria-expanded). `fixed` pins it to the viewport, otherwise to the nearest positioned parent.

Textarea for JSON with live validation (message includes line/column), Format and Minify actions.

Text field that formats input against a pattern as you type. `onValueChange` gives both masked and raw values.

Signature input: draw with mouse, pen or touch (pressure-aware), undo and clear. A "Type instead" mode gives keyboard and screen-reader users an equivalent. Emits a PNG data URL (or typed name). The PNG is transparent with strokes in `ink` (dark by default), whatever the on-screen theme.

OAuth sign-in button with the provider's mark. `icon` renders a square icon-only button (name stays accessible).

Change over time with a 10% area wash under 2px lines. Stack only when the total is meaningful.

Compare magnitudes across categories: ≤24px bars, 4px rounded data end, 2px gap between neighbours.

Ranked list where each row's background bar shows its share of the max (top pages, referrers, countries).

Contribution-style grid: one column per week, five steps of one hue, zero on the sunken surface. Day tooltips on hover, or focus + arrow keys (Left/Right a week, Up/Down a day).

Title, legend row, plot and a "Show data" table toggle. A static plot is role="img" with the summary; an interactive one labels its focus target instead.

Bars and lines on ONE shared y-axis (e.g. actual vs target). Never two y-scales: different units belong in separate charts.

Part-to-whole for a few categories as a ring, with a center total and legend.

Conversion funnel: bar per stage (share of the first stage) with step-to-step conversion.

240° gauge for a single bounded KPI. role="meter" with min/max, a clamped now and the formatted value as valuetext.

Magnitude across two categorical axes: one hue, light→dark, with a stepped legend. Cell tooltips on hover, or focus + arrow keys (Up/Down change row).

Trends over an ordered axis: 2px lines, end dots, crosshair tooltip with every series.

Part-to-whole for two to five categories; prefer bars for comparisons.

Compare a few entities across 4–8 dimensions. Polygons use a 10% wash with 2px outlines.

Concentric progress rings (activity-ring style). Each ring's track is a faint step of its own color.

Word-sized trend without axes. Always pair with the number it describes.

Bubble chart: scatter with a third value as bubble size, radius on a sqrt scale (4px floor to 26px) so area tracks the value.

Actual vs target against qualitative bands (poor/ok/good as three steps of the sequential ramp, light to dark). Compact alternative to gauges.

OHLC candles. Up candles are hollow (outline), down candles filled, so direction reads without color; success/danger tints reinforce it. OHLC tooltips on hover, or focus + arrow keys.

Single segmented bar showing how a whole splits into parts (or a value against bands), with an optional marker. Segments are separated by a surface gap; labels show boundaries.

Correlation / comparison matrix on a diverging scale: two hues for negative/positive with a neutral midpoint. Values are printed in each cell, so color is never the only encoding. Cell tooltips on hover, or focus + arrow keys (Up/Down change row).

Flow between stages (budget → departments, traffic → outcomes). Link color follows its source node; link tooltips on hover, or focus + arrow keys.

X/Y relationship across one or more series; `sizeLabel` turns it into a bubble chart: z sets the radius on a sqrt scale from 4px to 26px, so area grows with z (not strictly in proportion, given the 4px floor).

Hierarchy as rings: inner ring = groups (categorical hues), outer rings = children (tints). Arc tooltips on hover, or focus + arrow keys.

Status over time (uptime bars): one block per period, tooltip per block (hover, or focus + arrow keys), uptime summary. Status names are in the tooltip and table, not color alone.

Part-to-whole across a hierarchy: area = value, top-level groups get the categorical hues, leaves are tints of their group. Tile tooltips on hover, or focus + arrow keys.

10×10 grid where each square is 1% — a friendlier part-to-whole than a pie for a few categories.

All background agent tasks in one place, grouped by what they need from you. A task's title opens it (`onOpen`) in both views.

An agent's live plan: ordered steps with status and timing, steering notes, and an optional composer.

Multi-agent run: who's coordinating, which sub-agents are working on what, and their status.

Human-in-the-loop gate: the agent pauses until a person approves or denies a specific action.

Attachment chips for prompts and messages: image thumbnails, file type badge, upload progress, remove.

Scrolling message log that sticks to the bottom while new tokens arrive, unless the reader scrolled up; then a "Jump to latest" button appears. role="log" announces new messages politely.

One chat turn: avatar, name, time, message body and actions, for user and assistant roles.

How much of the model's context window is used, and by what.

Renders model output as Markdown (GFM tables, task lists, code). Safe by default: raw HTML in the text is not rendered, so model output can't inject markup.

Copy, feedback (mutually exclusive thumbs), regenerate and share for an assistant message. One tab stop (toolbar).

Model selector grouped by provider, with context size and capability badges.

Chat composer: auto-growing textarea, Enter to send (Shift+Enter for newline), attachments, Stop while streaming. IME-safe: Enter during composition (e.g. Japanese input) never sends.

Starter prompts for an empty chat: pills in a row, or cards in a grid.

Collapsible "thinking" trace: open while the model reasons, collapses to "Thought for Ns" when finished.

Numbered inline citation ("[2]") with a hover/focus preview of the source.

Indicator while a model works before the first token. Announced politely; motion stops for reduced-motion users.

One tool invocation: name, status, timing; expands to show arguments and result.

Live controls for a running agent: autonomy level, pause/resume, guardrails, and a "steer" box to redirect mid-run. Every control is controlled or uncontrolled.

What the assistant remembers about the user: searchable, editable inline, pin/delete, with a global on/off. "Forget everything" asks first.

Searchable, filterable library of prompt templates with {{variables}} filled in a dialog before use.

Agent-led structured questions, one at a time, with progress, skip/back and a summary the agent can act on.

Message reactions: toggle chips with live counts, plus an emoji picker to add new ones.

Editor with an assistant sidebar: pick an action, preview the suggestion as a word diff, accept or discard. `rewrite` is your model call; the demo ships a deterministic fake so it runs offline. The draft is controlled (`value`/`onChange`) or uncontrolled (`defaultValue`); Accept goes through `onChange` too.

Image with initials fallback (Base UI Avatar handles loading/error states).

Small status or category label; tone sets meaning, variant sets emphasis.

Surface for grouped content: header, body and footer slots; outline, elevated or filled.

Image with initials fallback (Base UI Avatar handles loading/error states).

Native scroll-snap carousel: swipe/trackpad scrolling for free, arrow buttons and dots for mouse/keyboard. Slides are a labelled group each ("2 of 5"), following the WAI carousel pattern.

Key–value pairs as a description list (<dl>).

Static, non-interactive list. For selectable or actionable rows use ListBox / ListView.

KPI tile: label, big value, change vs. previous period, optional sparkline.

Colored dot with a label for live states (online, degraded, offline), optionally pulsing.

Chronological event feed (ordered list). "dots" for compact activity, "icons" for rich histories.

Icon in a decorated container, for feature lists, empty states and modals.

Interactive dotted world map with no tile server: zoom buttons, Ctrl/⌘+wheel zoom, drag to pan, and keyboard-focusable markers that open popovers. Focus the map for arrow-key panning (Shift = bigger steps), + / − to zoom and 0 to reset. Markers are buttons in DOM order; focusing one that is out of view pans it into view.

Shows as many items as fit on one line and collapses the rest into a "+N" menu. Re-measures on resize. Pass `renderItem` for the visible chips and `getLabel` for the menu text. If the chips are links or buttons, pass `getHref` and/or `onAction` so the same entries in the "+N" menu navigate or act too.

Price tick: symbol, rolling price, signed change with arrow and color, optional sparkline. Change is never color-only.

Static embed card for a social post (testimonials, launch walls). Renders data you pass; it doesn't fetch. The date links out to `url` when given. Numbers follow the React Aria locale.

Collapses long content to `maxHeight` with a fade and a Show more / Show less toggle (only when it actually overflows).

Tiles a rotated text (and optional second line) watermark over its content. Decorative overlay: aria-hidden and pointer-events none, so content stays readable and interactive.

Path to the current page; the last item is the current page and is not a link.

Text link (React Aria Link) for navigation; use Button for actions.

Page navigation: numbered pages or a compact previous/next control.

App navigation column. Items are links (aria-current marks the active one); groups collapse; whole bar can shrink to an icon rail.

Switch between panels of related content in place (React Aria Tabs).

Desktop-app style menu bar (File / Edit / View) with roving focus between menus (Base UI Menubar).

Top app/site bar: brand, links (aria-current), actions; collapses into a disclosure menu on small screens.

Site header navigation with rich flyout panels that morph between triggers (Base UI Navigation Menu).

First focusable element on a page: hidden until focused, jumps keyboard users past the navigation.

Progress through a multi-step flow. Purely presentational: an ordered list with aria-current on the active step.

Page-level navigation that looks like tabs but is a list of links (aria-current="page"), for routed sections.

"On this page" list with scroll-spy: highlights the heading currently in view.

A row of controls with one tab stop; arrow keys move between them (React Aria Toolbar).

Animated menu toggle: three lines morph into an X (`spin`, `squeeze`) or an arrow. A disclosure button: it exposes aria-expanded (not aria-pressed, which together would announce two states) and a label; pass `aria-controls`.

macOS-style dock: icons magnify near the pointer. Static sizes for reduced motion; tooltips name each item; the `active` item gets aria-current.

Thin progress bar pinned to the top of the page (or a positioned container) during route changes.

Checkbox with label and description; supports indeterminate, groups and a card style.

Text input with a filtered dropdown of suggestions (React Aria ComboBox).

Pick exactly one option from a short list; plain or card-style radios.

Single-select toggle group with a sliding indicator (Motion layout animation).

Pick one option from a list in a popover (React Aria Select), with typeahead.

On/off toggle that takes effect immediately; use Checkbox in forms that submit.

Search field that filters an always-visible list in place (React Aria Autocomplete). Arrow keys move through results while typing.

Checkbox with label and description; supports indeterminate, groups and a card style.

Checkbox with label and description; supports indeterminate, groups and a card style.

Select with selectionMode="multiple": the popover stays open while toggling options.

Plain <select>: native mobile pickers, works without JS, ideal for long simple lists.

Pick exactly one option from a short list; plain or card-style radios.

Hierarchical picker: one listbox column per level; choosing a leaf closes and shows the full path. `value` follows later changes.

Borderless select that reads as text, for settings rows and sentences ("Notify me [weekly]").

Dual list: toggle items on either side (click, Space, Shift for ranges) and move them across with the arrow buttons.

Select whose options are a tree. Single selection with click, Enter or Space; arrow keys only move focus and expand folders.

Modal dialog: overlay + modal + dialog in one. Put it inside a DialogTrigger, after the trigger button.

Edge-anchored, swipeable panel built on React Aria Sheet (v1.22+). position: bottom (default) | top | left | right | center. Supports snapPoints.

Rich, non-modal preview on hover, focus or long press (React Aria PreviewTrigger). May contain interactive content.

Menu in its own popover. Use inside MenuTrigger (after the trigger button) or SubmenuTrigger.

Non-modal floating panel anchored to a trigger, for small interactive content.

Short label shown on hover and keyboard focus; not for essential content.

Bulk-action bar for selections (React Aria Toolbar: arrow keys move between actions).

Modal dialog: overlay + modal + dialog in one. Put it inside a DialogTrigger, after the trigger button.

Right-click (or long-press) menu (Base UI Context Menu).

Modal panel that slides in from an edge (no swipe gestures). Use Drawer for swipeable, snap-point sheets.

Guided product tour: a popover anchored to each step's target element, with a highlight ring on the target.

⌘K command menu: a modal with a search field that filters a keyboard-navigable menu (React Aria Autocomplete + Menu, so arrow keys work while typing).

Multi-step flow in one modal where earlier steps stay visible as cards stacked behind the active one. Back/Next move through steps; the title of each step is the dialog's accessible name. Steps stay mounted while the dialog is open, so uncontrolled fields keep their values on Back/Next; they reset when it closes.

Non-modal, draggable and resizable panel (inspector, chat, notes). Drag the title bar or focus it and use arrow keys (Shift = 32px); drag the corner grip or use Alt+arrow keys on the title bar to resize. Both stay inside the parent when `bounds="parent"`. Minimize collapses to the title bar.

Lightweight inline confirmation: the trigger opens an alertdialog popover anchored to it. Use for reversible-ish actions; use AlertDialog (modal) for destructive ones that can't be undone.

Click/tap info tip (the accessible alternative to a hover tooltip for important help): a small "?" or "i" button that opens a non-modal popover dialog. Works with touch and keyboard.

Consistent stroke-icon wrapper: currentColor, sizes, and correct a11y (aria-hidden unless labelled).