Showcase

  • Button: Displays a button or a component that looks like a button.
  • Kbd: Displays a keyboard key or shortcut hint.
  • Input: Displays a single-line text field with optional leading icon and clear action.
  • Textarea: Displays a multi-line text field with the same sunken surface as Input.
  • Password Input: Reveal toggle, Caps Lock warning, and a strength meter driven by visible rules.
  • Phone Input: A searchable country selector welded to a national number field, emitting E.164.
  • Number Input: Steppers, clamping, and grouped display — without type=number's scroll-wheel trap.
  • OTP Input: One box per character for a verification code — pasting the whole code just works.
  • Date Field: Typed date entry in locale-ordered segments. Powers Date Picker's editable trigger; use it alone when no calendar is wanted.
  • Field: Wires a label, control, and hint or error message together with generated ids and aria attributes.
  • Checkbox: A control that allows the user to toggle between checked and not checked.
  • RadioGroup: A set of checkable buttons where no more than one can be checked at a time.
  • Switch: A control that allows the user to toggle a setting on or off.
  • Select: Displays a list of options for the user to pick from, triggered by a button.
  • Combobox: A Select you can type into — filters as you go, with grouping and an optional create row.
  • Slider: Picks a number from a range by dragging a thumb along a track.
  • Calendar: An inline month grid for choosing a single day or a range.
  • Date Picker: A calendar popover for choosing dates — typeable, or a range, or with a time.
  • Time Picker: Hour, minute, and AM/PM columns that read and write a 24-hour time string.
  • Text: The type scale as a component, one variant per voice.
  • Badge: Displays a status pill with a tinted background and optional leading dot.
  • Chip: Displays a compact attachment pill with an optional icon and dismiss button.
  • Avatar: Displays a user's initials or image, with a group that folds overflow into a +N bubble.
  • Divider: Displays a hairline rule, optionally split around a mono caption label.
  • Card: Displays content on a raised surface with an optional header, body, and footer.
  • Alert: Inline tone messaging — the stationary sibling of a toast.
  • Table: A real table in composable parts — no data layer, no column definitions.
  • Accordion: A vertically stacked set of disclosure rows that expand one at a time.
  • Collapsible: A single standalone disclosure section that folds open and closed.
  • Tabs: A row of tab buttons that switches between layered panels of content.
  • Segmented: A compact control for switching between a small set of exclusive options.
  • Tooltip: Displays a short label above or below its trigger on hover and focus.
  • Menu: Displays a dropdown list of actions with keyboard navigation and a gliding highlight.
  • Popover: The anchored-panel mechanics behind Select, Menu, and Date Picker: positioning, edge flipping, and dismissal.
  • Dialog: Displays a modal window over the page with a title, body, and footer actions.
  • Drawer: A panel that slides in from an edge — filters, record detail, or mobile navigation.
  • Command: The ⌘K palette — subsequence search over grouped actions, with shortcut hints.
  • Toast: Displays a transient notification queued by the imperative toast() function.
  • Snippet: Static, syntax-highlighted code display with a copy action.
  • Spinner: An animated ring that indicates an in-flight operation.
  • Skeleton: A shimmering placeholder shown while content loads.
  • Progress: Displays a hairline bar indicating the completion progress of a task.
  • Empty State: Displays a placeholder with an icon, title, description, and optional action.
  • Navbar: Displays a sticky top navigation header with brand, links, and actions.
  • Breadcrumb: The trail back up, collapsing in the middle when it gets long.
  • Pagination: Page numbers with an elided middle, so the control never changes width.
  • Tag Input: Free-text chips — Enter or comma commits, and pasting a list adds all of it at once.
  • File Drop: A drop zone around a real file input — rejections are reported, never silent.
  • Stat Tile: One headline number with its change and a sparkline — the right answer more often than a chart.
  • Meter: One ratio against a limit, turning amber then red as the allowance runs out.
  • Bar Chart: Compare magnitude across categories — grouped, stacked, or horizontal.
  • Line Chart: Trend over time, with a snapping crosshair that reads every series at once.
  • Pie Chart: Part-to-whole as solid wedges — how the parts compare to each other.
  • Doughnut Chart: A pie with the total in the hole — what makes up this one number.
  • Loading State: Pixel-grid loader with shimmer and elapsed time.
  • Thinking: Expandable traces — steps, reasoning, search, coding.
  • Streaming Text: Streamed answer with inline sources, actions, and follow-ups.
  • Approval Card: Human-in-the-loop questions the agent asks before acting.
  • Tool Chips: Code edits and tool calls as compact chips.
  • Task Rows: Live agent task status — running, failed, completed.
  • Chat: Tabbed chat panel with reasoning replies and a composer.
  • Prompt Bar: Composer with @ sources, / commands, model picker, and dictation.
  • Recommendation Card: Agent suggestion with a confidence meter and actions.
  • Context Cards: Retrieved knowledge chunks with their sources.
  • Diff Table: AI-proposed edits sweeping through tabular data.
  • Records Table: CRM-style grid with tags, sorting, and relationship status.
  • Filter Table: Status chips that reorganize live data.
  • Sidebar Nav: Workspace navigation with quick search.
  • Search: Command search with live filtering and an empty state.
  • Insight Cards: Paged agent insights with scrub-ready live charts.
  • Code Block: Agent-written code streaming in line by line.
  • Fine-tune Card: The agent adjusts design properties in an inspector.
  • Selection Actions: Highlight a passage and hand it to the agent to rewrite.