Components

An AI assistant asking before it acts: what it wants to do, exactly what that means, and Approve or Deny.

The scrolling part of a chat with an AI assistant: it follows the newest message while it streams, inside a panel that keeps its height.

One message in a conversation with an AI assistant, with a cursor while it streams and Copy, Regenerate and feedback under it.

Where a message to an AI assistant is written: it grows as you type, takes files, and turns send into stop while the reply streams.

Things to ask in an empty AI conversation: chips, one scrolling row, or cards with an icon and a line.

What an AI model thought before it answered, folded under one line: "Thinking…" while it works, then how long it took.

The tools an AI assistant used to get its answer, step by step: their status, how long they took, and their input and output.

Triggers an action. Sixteen variants — solid, soft, outline, ghost and link — four sizes, each with a square one for an icon alone, a loading state, and can render as a link.

A fast, filterable command menu — inline or as a ⌘K palette.

A menu that opens on right-click or long-press, with shortcuts, checkboxes, radio items and submenus.

Copies a value in one tag: an icon button with a tooltip, or a button with a label, that turns into a check and says "Copied".

A menu of actions or options, opened by a button.

A button that stays pressed: Bold, Pin, Mute.

A set of toggles: one at a time, like text alignment, or any of them, like Bold, Italic, Underline.

Values over time as filled areas: one series, several, or stacked into a total, with a dashed one for a comparison. Plain SVG.

Values compared across categories or periods as bars: one series, several side by side, or stacked. Plain SVG.

Values side by side as labelled bars: top products, traffic sources, storage by type.

Prices over time as candles, like a trading chart: open, high, low and close per period, with volume. Plain SVG.

Parts of a whole as a ring, with a legend of every value and share. Plain SVG, no chart library.

One value within a range as a half ring — a score, a quota or a target. A meter for assistive technology.

Activity per day as a calendar grid of weeks, like a contribution graph. Plain SVG.

Values over time as lines, with dashed ones for a target or last year; the axis fits the values so changes show. Plain SVG.

A tiny line, area or bar chart without axes, for a trend next to a number or in a table cell.

Parts of a whole as rectangles sized by value, with groups you can zoom into.

An image element with a fallback for representing a user, and a group that stacks several.

A small label for statuses, counts and categories.

Slides in a row to swipe or step through, with arrows, dots, looping and autoplay.

A full-featured table built on TanStack Table v9: search, faceted filters, sorting, column visibility, row selection, pagination and CSV or Excel export.

A key or a shortcut as on a keyboard: ⌘ K on a Mac, Ctrl K elsewhere, read out as words.

One number that matters, with its change against a past period and room for a sparkline.

A responsive table for tabular data.

A vertical list of events in chronological order.

Nested items that open and close: files, categories or permissions.

A date grid for picking a day or a range, built on DayPicker.

A button that opens a calendar in a popover.

Pick a start and end day on a two-month calendar, or from shortcuts like “Last 7 days”.

A time picked from a list of steps or typed exactly, shown the locale's way, stored as HH:MM.

Items that scroll on their own and loop without a seam: logos, testimonials, integrations, a news or price ticker — sideways or up.

Text that arrives word by word as it scrolls into view: blurring in, rising from a line, fading or wiped in.

A callout that draws attention to important information.

What a page, list or table shows when there's nothing in it yet — and the next step to take.

An aside in the flow of a page: a tip or a caveat on a calm card, with a breath of its color in the corner.

Shows how far a task has progressed.

A placeholder shown while content is loading.

An animated indicator for loading states.

Brief, non-blocking notifications. Powered by Sonner.

A control that toggles between checked and unchecked.

A label, a hint and an error around a form control, with the ids and aria attributes wired up.

Drop files or browse for them, with type, size and count checks and a list of what was picked.

A text field for forms and search.

A one-time code in boxes, one character each: typed, pasted or filled from a text message.

A number field with − / + steppers, arrow-key steps, limits and locale formatting — and MoneyInput for amounts.

A set of options where only one can be selected.

A row of options where one is picked, like a view switcher. The highlight slides to the choice.

Pick a value or a range by dragging a thumb.

A toggle for on/off settings.

Type free-text tags; Enter or a comma adds one, and pasting a list adds them all.

A multi-line text field that grows with its content.

Vertically stacked sections that expand to reveal content.

A container that groups related content and actions — from simple panels to image-rich product, article and profile cards.

Panels whose sizes you change by dragging the handle between them, or with the keyboard.

A scroll area whose edges fade while there's more to see, instead of a scrollbar.

Visually separates content, horizontally or vertically.

Shows where a page sits in the site's hierarchy, with links back up to each level.

Page navigation with previous/next links and ellipsis gaps.

An app's side navigation: groups of links, sections that open, a sliding current-page highlight, and a collapse to icons.

Shows progress through a multi-step flow.

Switch between related views without leaving the page.

A question that has to be answered before anything else: Cancel, or confirm what can't be undone.

A modal window that focuses the user on a single task.

A preview that opens when a pointer rests on a link — a person, a ticket, a page.

Rich content in a floating panel, anchored to a trigger.

A panel that slides in from the edge of the screen.

A short hint shown on hover or keyboard focus.

A searchable select — type to filter a long list of options.

Pick several options from a searchable list; the picks show as removable chips.

A styled native <select> — fully accessible and mobile-friendly.

A custom dropdown for choosing one option from a list.