Components

Button

Primary actions, secondary actions, and destructive operations.

Checkbox

Toggle individual options on or off.

Input

Text fields for single-line data entry.

Multi Select

Keyboard-navigable dropdown for selecting multiple items with action labels.

Radio

Select one option from a mutually exclusive group.

Select

Dropdown menus for choosing from a list of options.

Switch

Binary toggle for on/off states.

Textarea

Multi-line text input with optional character count.

Avatar

User or entity representation with image or initials.

Badge

Compact labels for status, categories, and counts.

Code Block

Monospace display for code snippets and tokens.

Journey

Horizontal step-by-step flow for processes, onboarding, and architecture diagrams.

Note

Contextual callouts for info, success, warning, and error states.

Table

Structured data in rows and columns.

Progress

Determinate progress bars showing completion.

Skeleton

Placeholder shapes while content loads.

Spinner

Loading indicators for async operations.

Card

Contained surfaces for grouping related content and actions.

Hero

Full-width banner for page headers with light and dark variants.

Modal

Overlay dialogs for focused tasks and confirmations.

Tabs

Horizontal navigation between related content panels.

Tooltip

Contextual hints that appear on hover.

Outcome Header

Persistent bar anchoring the user to the outcome they are achieving, with a clear return action.

Flow Entry

The arriving state — what users see while their context resolves, with loading, error, and transition states.

Outcome Complete

Achievement confirmation with auto-return, next-step guidance, and outcome summary.