A vertically stacked set of collapsible panels, in card or divider style.

A floating bar of bulk actions for a selection.

One line in a live activity stream: status, action, tool and elapsed time.

A time-ordered list of scheduled events.

One event in an agenda list, with its start and end time, a color bar, details and guests.

Who is talking in a multi-agent chat: tint colour, name and role.

The fleet view — every agent, its current status and how long it has been there.

One parallel worker: its status, queue, throughput and the tasks it holds.

The agent's plan as a checklist: follow it live, edit it before the run, or group it into phases.

A pill showing what a run is doing right now, with a live elapsed counter.

An inline banner in 5 colors and 2 sizes, with an optional close button and action.

A dialog for confirmations and destructive actions: a click outside does not close it, only a button or Escape does.

The app shell: sticky navbar and sidebar over a scrolling page, aside, banner and footer, skip link, and a drawer below 64rem.

The human-in-the-loop gate: what the agent wants to do, how risky it is, approve or reject.

A gradient-filled area chart for visualizing trends over time.

The side panel for what the agent made — code or a document — with versions, copy and download.

The title and subtitle at the top of a sign-in, sign-up or onboarding form.

An input that suggests options as you type.

A user or entity's profile image with a text fallback.

A stack of overlapping avatars, with an optional overflow count.

Overlapping avatars with a “+N” count for everyone past the limit.

A recovery code that copies itself when clicked and is crossed out once it has been used.

A small status or category label in 12 colors and 6 styles.

Compares categorical data with grouped or stacked bars.

Shows the user's location in a hierarchy, in "plain" or bordered "border" style.

A scatter plot where marker size encodes a third dimension of the data.

The main action trigger, in 10 variants, 2 shapes and 5 sizes.

A row of connected buttons sharing borders and outer corners, for view switchers or segmented actions.

A month-grid date picker with single or range selection.

An OHLC (open/high/low/close) chart for visualizing price movement over time.

A bordered container for grouping related content.

A horizontally scrollable row of items with arrow controls.

A compact color swatch picker for inline use in a Data Grid cell.

A compact select for inline use in a Data Grid cell.

A compact progress/value slider for inline use in a Data Grid cell.

A compact switch for inline use in a Data Grid cell.

A collapsible list of the model's intermediate reasoning steps.

A file chip attached to a chat message, with an optional remove button.

A sidebar list of past conversations with preview and timestamp.

A bouncing-dots indicator shown while the assistant is composing a reply.

A single message bubble on the indigo tint, aligned right for the user and left for the assistant.

Copy / retry / thumbs up-down actions shown under an assistant message.

A citation chip linking to a source referenced in an answer.

A collapsible card showing a tool/function call's name, status, and result.

A single choice that is on or off, with an indeterminate state for “some selected”.

A multi-select group of toggle-styled buttons.

A checkbox with a clickable label and an optional description below it.

One step of an onboarding checklist that can be ticked off, with the next step to do highlighted.

The numbered steps of a checkout, where finished steps can be clicked to go back.

A syntax-styled code block with a language label and copy button.

A single collapsible panel controlled by a trigger button.

Pick a colour: saturation and brightness, hue, opacity, eyedropper, HEX/RGB/HSL values and saved colours — inline or from a trigger field.

Vertical bars for comparing categories side by side.

The top of a Kanban column, with a colored dot, a card count and buttons to add a card or open a menu.

An input combined with a filterable list of predefined items to select.

A searchable command palette dialog with keyboard navigation (⌘K pattern).

One row in a command menu: an icon, a label, optional context and its shortcut keys.

Combines bars and a trend line in a single chart.

Actions that open on right-click, styled like the dropdown menu.

How full the model's context window is: a ring for the prompt toolbar or a bar with a breakdown.

A removable chip for what the prompt refers to: a file, a person, a channel or a link.

One conversation in an inbox list, with sender, subject, preview, tags and an unread state.

Spend against budget for a run, a day or a month — amber at 80%, red when it is gone.

A full-featured table: sort, search, select, resize columns, paginate.

A Calendar inside a Popover, with Cancel/Apply actions.

A modal window for focused tasks, built on Base UI.

The result of an edit tool call: file, added and removed lines, and the changed code.

A separator with a centered text label, e.g. for "or" between two sign-in options.

A drag-and-drop file upload target with a click-to-browse fallback.

A menu of actions: icons, shortcuts, checkbox and radio entries, submenus, two-line entries, loading and empty states.

A step's share of the run as a bar, with a tick at the estimate and red when it runs over.

A grid of selectable emoji, typically shown inside a Popover.

A toggleable emoji reaction with a count, like a Slack reaction.

Placeholder shown when a list or search has no results.

A small colored event label that fits in a calendar day cell.

Countdown until an approval or permission request lapses — amber at the end, red once expired.

Labelling and validation for a single form control — label, description, and error message.

A native fieldset with a legend, for grouping related fields.

A file tile with a preview, a name and details, plus optional selection, a menu and a deleted state.

A collapsible, indented tree of folders and files.

A sticky table of contents with an active-section indicator.

A form wrapper that simplifies validation and submission.

The row of buttons at the end of a form, aligned right, left or spread to both edges.

Shows drop-off across sequential stages, each with a label and value.

Marks the moment one agent passes the conversation to another.

One row of a rating breakdown: the star level, a filled bar and its share.

A card with a mouse-tracking spotlight/gradient shine effect.

A rich preview popup shown on hovering a trigger.

A square or circular button for a single icon action.

A small line of supporting text with an icon, either neutral or as a warning.

A compact select meant to sit inline within a sentence of text.

A single-line text field with sm/default/lg sizes and error state.

Groups an input with leading/trailing addons — icons, buttons, or text.

A read-only invite link with a copy button that confirms when the link is copied.

An email field and a role picker for inviting one person, with a button to remove the row.

A generic row card: icon, title, description, meta, action.

A drag-and-drop board of columns and cards.

A task card for a Kanban board, with labels, due date, comments, checklist progress and assignees.

Displays a keyboard key or shortcut, e.g. inside a search input.

One or more key caps with a short label, for the shortcut legend at the bottom of a command menu.

A single metric with its change, as a card with a dot and delta, a plain card with a caption, or an inline value.

A row of KPIs sharing one bordered container.

An accessible label for a form control.

Plots one or more series as smooth or linear lines.

One product line in a cart or order summary, with image, variant, quantity and price.

A simple bordered list of rows with leading/trailing content.

A run's log with an All or Errors filter and auto-scroll.

Prose styling wrapper for rendered markdown/HTML assistant output.

The @ picker for adding context to a prompt: files, people and channels in groups.

A graphical display of a fixed value within a range, e.g. disk usage.

One number with its trend and, per variant, a sparkline, progress, breakdown, comparison, distribution, status, action or AI insight.

The model chip in a prompt box: always clickable, it opens a popover to switch models.

Pick the model and how hard it should think, with context size and price at a glance.

A full-width styled select trigger and popup list.

The top bar in four scroll modes — static, sticky, hide on scroll, transparent — with mega menu, search, overflow and a mobile drawer.

One entry in a notification list, with an avatar or icon, the message, optional actions and an unread dot.

A numeric input with increment/decrement buttons.

A +/- increment control for a bounded numeric value.

A large number with its change beside it: caret up or down, green or red.

A selectable card with a radio button or checkbox, a title and a short description.

Wraps radio Option Rows so that exactly one of them is selected.

Large boxes for typing a 4- or 6-digit verification code.

A segmented input for one-time passwords and verification codes.

The title row at the top of a page or section, with an optional description, buttons or a text link.

Page navigation with Prev/Next and numbered pages, or a simple "Page X of Y" mode.

A password input with a button to show or hide what was typed.

One password rule in a checklist that turns green once the password meets it.

A four-step meter with a label that shows how strong a password is.

A row of small labels for the payment methods a shop accepts.

An avatar with a name and role for tables and lists, with an optional capacity bar.

Shows proportions of a whole, with an optional donut mode.

One step of an agent plan: number or status icon, title, status in words and how long it took.

A plan on one card before it runs: goal, steps, time, cost, tools and phases.

A floating panel anchored to a trigger element.

Wraps any content with a scale-down press animation.

A price with an optional billing period, a crossed-out old price and a savings badge.

A shop tile with image, name, price and rating, plus optional wishlist and add-to-cart buttons.

A product photo, or a colored placeholder with an icon when there is no photo yet.

A compact product row with a quick add button, for recommendations next to a cart.

A horizontal bar showing completion of a task.

A clickable project tile with a colored cover, a name and a short line of detail.

An auto-resizing chat input with attach and send buttons.

What the agent may do with the next prompt — answer, act or edit — with the send keys underneath.

A pill-shaped suggested-prompt chip shown above an empty chat input.

Drag down from the top of any content past a threshold to trigger an async refresh, with a rotating spinner and a rubber-band release.

Compares multiple series across shared axes on a polar grid.

A circular progress-style chart for a single goal value.

A half ring split into segments — shares of a whole with the legend underneath.

A single-select group of toggle-styled buttons.

A set of mutually exclusive options.

An interactive star rating input.

A card that stands in for a table row on small screens: who it is, a status and a few key fields.

A two-pane layout with a draggable divider between them.

A customer review with author, rating, text, photos, a reply from the store and a helpful button.

A Tiptap-powered WYSIWYG editor with a formatting toolbar.

A failed run: which step threw, how many attempts are left, retry or resume.

Every step of a run in order, with duration, tokens and expandable input/output.

What an agent asks to access, one scope per row, with a countdown until the request lapses.

A scrollable container with custom, always-styled scrollbars.

A search hit with an icon, a title, a short excerpt and where it lives.

One ranked result of a web-search tool call: source, relevance, title and snippet.

A pill-shaped single-select toggle group, like a compact tab bar.

A list row pairing a leading icon/avatar and label/description with a trailing radio, checkbox, or switch.

A thin dividing line, horizontal or vertical, solid or dashed.

A setting's title and description with a switch, or any other control, on the right.

A panel that slides in from an edge of the screen — left, right, or bottom.

App navigation in six modes: docked, offcanvas, icon rail, rail with flyouts, double sidebar and overlay drawer.

A pulsing placeholder shown while content is loading.

The popover that opens when someone types / in the prompt: commands with a short description, filtered as they type.

A draggable control for selecting one value or a range along a track.

Sign-in buttons for Google, Apple, GitHub and Microsoft, side by side or stacked.

Numbered sources pinned to a chat; citations like [1] in answers point here.

A tiny trend line without axes — green when it rises, red when it falls — for table cells, price cards and metric tiles.

A spinning indicator for an in-progress loading state.

A small, read-only row of stars that shows a rating.

The phone status bar with the time, for the top of a mobile screen mockup.

A horizontal multi-step progress indicator with connectors.

A toggle control for a binary setting.

A horizontal row of underlined tabs on a bottom border that scrolls sideways when space runs out.

A single underlined tab that shows a count while it is active, used inside a Tab Bar.

Rows and columns with 23 ready-made cell types; for sorting and search use Data Grid.

Switches between related views in the same context.

A row in a Gantt task list: either a task with its color, assignee and dates, or a group header that folds open and closed.

The result of a code-execution tool call: command, exit code, run time, stdout and stderr.

A text input with a label, helper or error text, and optional icons or add-ons on either side.

A line of text followed by a link, like “Don't have an account? Sign up”, or a back link with an arrow.

A shimmering-gradient text effect for a 'thinking...' loading label.

A multi-line text field with sm/default/lg sizes and an optional character counter.

A multi-line text input with a label and helper or error text.

A vertical sequence of dated, dot-connected events.

One entry in an activity feed or history, with an avatar or status dot and a line to the next entry.

A temporary notification that appears in the corner of the screen, with success/error/warning/info types.

A standalone two-state button that can be pressed or unpressed.

Whether an agent may call a tool: Allow, Ask or Deny, with the scope it covers.

A container for grouping a set of buttons and controls.

A short label shown on hover, in any of 4 directions.

A small pill showing a change, up or down, in seven icon styles.

One limit as a row: what is used, what is allowed, and a warning before it runs out.

An avatar with a name and a second line, for account menus, sidebars and quotes.

Talk instead of typing: idle, listening with a live waveform and transcript, then transcribing.

A generic dashboard widget shell: header, body, footer.