Skip to Content
AuroraDesign System
Color Tokens
Foundations
Color TokensTypographySpacing & RadiiBrand & MarkDirection
Controls
ButtonsButton GroupBadgesToggle SwitchToggleToggle GroupAvatarProgressSpinnerSeparatorToolbarKbd
Form Elements
Inputs & SelectsInputFieldLabelInput GroupInput OTPNative SelectSelectComboboxCheckbox & RadioRadio GroupSliderNumber InputTextareaCalendarDate PickerTabs & Pills
Feedback
AlertBannersCalloutToastsSonnerTooltipEmpty StatesSkeletonStatus IndicatorShimmerConfirmation
Navigation
BreadcrumbPaginationCommandNavigation MenuMenubar
Data
Stat CardsTablesData TableFilter BarsTimelineDescription ListSearch ResultsListboxMarketplace
Overlays
Modal & DialogAlert DialogAccordionCollapsibleDropdownsContext MenuPopoverHover CardSheetDrawerShare Dialog
Chat & AI
Prompt InputAI ElementsMessageConversationModel SelectorPersonaOpen in ChatReasoningTool CallsToolThinkingChain of ThoughtPlanTaskQueueSuggestionCode BlockArtifactTerminalPermission PromptAsk User QuestionPermissions ConfigCommand PaletteSidebar
Runtime & Execution
AgentCheckpointCommitContext PanelEnvironment VariablesPackage InfoSchema DisplaySandboxSnippetJSX PreviewStack TraceTest ResultsPanelControl StripCanvasConnectionEdgeNode
Media & Voice
Audio PlayerMic SelectorSpeech InputTranscriptionVoice Selector
Content
Attachment ChipAI AttachmentsSourcesInline CitationFile PickerFile TreeCode EditorCode WorkspaceWeb PreviewAspect RatioCardCarouselChartImageItemResizable PanelsScroll Area
Auth & Errors
LoginOAuth FlowError Pages
Themes
Light Mode
AI Elements (new)
ActionActionsAiImageGridBranchLoaderMessageAvatarMessageContentResponseSource
Aurora Extensions
ChatMessageChatSidebarColorPickerComponentCardCopyButtonMultiSelectOperationIconProgressRingRangeSliderRatingSegmentedSpotlightStatusDotStepperTagInput

Components

Color Tokens

Brand tokens - identity

Use cyan and rose for Aurora identity. Use Axon orange to signal AI or automation emphasis. Never use brand tokens to communicate status.

accent-primary

--aurora-accent-primary

accent-pink

--aurora-accent-pink

axon-orange

--axon-orange

Semantic tokens - meaning

Use these roles in component APIs instead of reaching for hue names. Each role ships a full surface / border / foreground family.

info

--aurora-info

success

--aurora-success

warn

--aurora-warn

error

--aurora-error

neutral

--aurora-neutral

Interaction tokens - behavior

Use these shared tokens for overlays, selection, disabled states, and pressed states.

overlay

--aurora-overlay

disabled-surface

--aurora-disabled-surface

subtle-bg

--aurora-subtle-bg

selected-bg

--aurora-selected-bg

pressed-bg

--aurora-pressed-bg

Aurora CSS custom property token definitions for the full Aurora color, typography, shadow, and radius system.

Install

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