73

Getting started

Introduction Installation Theming Skill Changelog Studio

Components 58

Overview Accordion Alert Alert Dialog Attachment Avatar Badge Breadcrumb Button Card Checkbox Code Block Collapsible Color Picker Combobox Command Composer Context Menu Conversation Copy Button Dropdown Menu File Diff Fullscreen Nav Gauge Hover Card Input Label Markdown Message Modal Navigation Menu Pagination Popover Progress Question Radio Group Reasoning Reorder List Response Stream Scroll Area Select Sheet Shortcut Show More Sidebar Skeleton Slider Spinner Switch Tabs Tag Input Task Steps Textarea Toast Toggle Toggle Group Tool Tooltip Typography

73

Components

Filter by name or purpose. Press Enter to open the first match, or Escape to clear the filter.

58 components

AI

Conversation A chat viewport that follows new messages.
Message One chat turn, aligned by role, with actions.
Composer The prompt input for a chat, with submit and stop.
Attachment Picks, drops, and pastes files with upload states.
Question Asks the user a choice or free-text question inline.
Reasoning A collapsible trace of the model’s thinking.
Tool Collapsible groups of an assistant’s tool calls.
Response Stream Reveals streamed text at a steady pace.

Inputs

Button Actions with loading, success, and error states.
Checkbox A labeled on or off choice.
Color Picker Picks a hex color, with optional presets.
Combobox A select you can type into and search.
Input Single-line text entry with labels and adornments.
Label A styled native label for a form control.
Radio Group Picks exactly one option from a short list.
Select Picks one option from a known list.
Slider Scrubs a number with its label inside the field.
Switch Turns a setting on or off immediately.
Tag Input Enters a list of tags with keyboard and paste.
Textarea Multi-line text entry.
Toggle A button that stays pressed or unpressed.
Toggle Group A row of toggles with shared selection.

Overlays

Alert Dialog Confirms a consequential action before it runs.
Command A searchable command palette.
Context Menu Actions for whatever was right-clicked.
Dropdown Menu A menu of actions anchored to a button.
Hover Card A preview that opens on hover or focus.
Modal A centered dialog for forms and confirmations.
Popover A floating panel anchored to a trigger.
Sheet A panel that slides in from the left or right edge.
Tooltip Brief help text on hover or focus.

Feedback

Alert Inline callouts for info, success, warnings, and errors.
Badge Small tags for status and metadata.
Gauge A circular meter for usage and limits.
Progress How far along a task is, or that it is running.
Skeleton Placeholders that hold layout while loading.
Spinner Signals indeterminate work.
Task Steps Shows progress through an ordered list of steps.
Toast Brief notifications fired from anywhere.

Navigation

Breadcrumb Shows where a page sits in a hierarchy.
Fullscreen Nav A mobile menu that fills the screen.
Navigation Menu A site header menu whose panels share one morphing viewport.
Pagination Moves between pages of a long list.
Sidebar A collapsible app-shell navigation column with an inset layout.
Tabs Switches between views with a sliding indicator.

Layout

Accordion Stacked sections that open one or many at a time.
Avatar A profile image that falls back to initials.
Card A surface that groups related content.
Collapsible One panel that opens and closes.
Reorder List Reorders items by dragging or with the keyboard.
Scroll Area A scroll container with a themed scrollbar.
Show More Clamps long content until it is expanded.

Content

Code Block Highlighted code with language tabs and copy.
Copy Button Copies text and confirms it in place.
File Diff A unified diff with gutters and change counts.
Markdown Renders model Markdown with raw HTML shown as text.
Shortcut Shows a keyboard shortcut and runs it on keypress.
Typography Headings, body text, inline code, and metadata.