Design · Components

The components.

30 primitives, in both Base UI and Radix flavors. Every specimen below is live; open a component for its variants, API, and source.

Actions

2 components

Button

The pressable object: thin, flat, and 8px round, in every weight a surface needs.

Dropdown Menu

Actions behind a trigger: items, shortcuts, and separators on a quiet surface.

Inputs

5 components

Input

A single-line field with a label, drawn with a hairline.

Select

Pick one value from a list, with groups and sizes.

Combobox

Type to filter, then pick: a select with a search field.

Switch

A binary control in two sizes; the only capsule in the kit.

StreamingCompact

Kbd

Keyboard keys as printed caps, for shortcuts and hints.

Search⌘KAsk AI⌘ISend⏎

Display

14 components

Badge

A small label for status, categories, or metadata.

OutlineSecondaryMutedGhostInfoWarningSuccessDestructive

Avatar

People as initials or images, alone or stacked in groups.

TLMKJS

Skeleton

The loading shape of content that has a known layout.

Separator

A hairline between things, horizontal or vertical.

Thread

Docs

Elements

Cloud

Number Roll

Numbers that roll to their next value instead of jumping.

Dot Matrix

A dot-grid indicator for connecting, running, and settled states.

idle

thinking

streaming

searching

syncing

connecting

waiting

uploading

downloading

listening

speaking

recording

success

error

warning

info

paused

stopped

offline

Diff Viewer

Code changes as unified or split diffs, line by line.

TSexample.ts+5-3

1-function greet(name) {

2- console.log("Hello, " + name);

1+function greet(name: string): void {

2+ console.log(`Hello, ${name}!`);

3 }

5-greet("World");

5+// Call the function

6+greet("World");

7+greet("TypeScript");

Scrollbar

A quiet overlay scrollbar for panes that keep their own scroll.

Message 1: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 2: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 3: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 4: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 5: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 6: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 7: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 8: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 9: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 10: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 11: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 12: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 13: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 14: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 15: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 16: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 17: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 18: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 19: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 20: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Callout

A quiet aside on a colored rule, for notes, warnings, and errors in prose.

Info

Streaming starts after the first token arrives.

Warning

This adapter needs an API key at build time.

Success

The thread was exported as markdown.

Steps

A numbered rail for processes that happen in order.

Install the package

One command adds the runtime and the styles.

Wrap your app

The provider carries the thread state.

Send a message

The thread streams from your backend.

Code Block

Highlighted code on a field panel, with a title bar and a copy button.

debounce.ts

export function debounce(fn, wait) {  let timer;  return (...args) => {    clearTimeout(timer);    timer = setTimeout(() => fn(...args), wait);  };}

Command Tabs

One command in several dialects, with synced tabs and a copy button.

npm install @assistant-ui/react

Table

A print-register data table with hairline rules and mono headers.

Radius scale of the design system.
Token	Value	Applies to
`--radius-control`	8px	Buttons, inputs, menu items
`--radius-surface`	10px	Cards, popovers, panels
`--radius-xl`	12px	Dialogs, large surfaces
`--radius-thread`	16px	The chat viewport

Definition List

A spec sheet of terms and details, one hairline per row.

commandsRecord<string, string>: Tab label to command line, in display order.
storageKey?string: Persists the selected tab and keeps every instance with the same key in sync.
onValueChange?(value: string) => void: Called when the user picks a tab.