Skip to Content

AuroraDesign System

Segmented

Foundations

Color Tokens Typography Spacing & Radii Brand & Mark Direction

Controls

Buttons Button Group Badges Toggle Switch Toggle Toggle Group Avatar Progress Spinner Separator Toolbar Kbd

Form Elements

Inputs & Selects Input Field Label Input Group Input OTP Native Select Select Combobox Checkbox & Radio Radio Group Slider Number Input Textarea Calendar Date Picker Tabs & Pills

Feedback

Alert Banners Callout Toasts Sonner Tooltip Empty States Skeleton Status Indicator Shimmer Confirmation

Navigation

Breadcrumb Pagination Command Navigation Menu Menubar

Data

Stat Cards Tables Data Table Filter Bars Timeline Description List Search Results Listbox Marketplace

Overlays

Modal & Dialog Alert Dialog Accordion Collapsible Dropdowns Context Menu Popover Hover Card Sheet Drawer Share Dialog

Chat & AI

Prompt Input AI Elements Message Conversation Model Selector Persona Open in Chat Reasoning Tool Calls Tool Thinking Chain of Thought Plan Task Queue Suggestion Code Block Artifact Terminal Permission Prompt Ask User Question Permissions Config Command Palette Sidebar

Runtime & Execution

Agent Checkpoint Commit Context Panel Environment Variables Package Info Schema Display Sandbox Snippet JSX Preview Stack Trace Test Results Panel Control Strip Canvas Connection Edge Node

Media & Voice

Audio Player Mic Selector Speech Input Transcription Voice Selector

Content

Attachment Chip AI Attachments Sources Inline Citation File Picker File Tree Code Editor Code Workspace Web Preview Aspect Ratio Card Carousel Chart Image Item Resizable Panels Scroll Area

Auth & Errors

Login OAuth Flow Error Pages

Themes

AI Elements (new)

Action Actions AiImageGrid Branch Loader MessageAvatar MessageContent Response Source

Aurora Extensions

ChatMessage ChatSidebar ColorPicker ComponentCard CopyButton MultiSelect OperationIcon ProgressRing RangeSlider Rating Segmented Spotlight StatusDot Stepper TagInput

Components

Segmented

Aurora Segmented — Claude Design parity.

Install

npx shadcn@latest add https://aurora.tootie.tv/r/aurora-segmented.json

Requires@aurora/aurora-tokens