Components
All components
Every component in the system, with a live preview of each. Search by name, by what it does, or by whatever you happen to call it — “modal”, “toggle” and “chip” all find the right thing.
BrowsePermalink to this section
Filtering happens as you type. Press / to jump to the search field from anywhere on the page.
36 components
Triggers an action with six semantic variants and optional token-driven material depth.
A button whose whole label is an icon, always carrying an accessible name.
Read the link guidelines
Navigates. Three variants for running text, navigation lists and utility links.
Coordinates single or multiple pressed options with roving keyboard focus.
A visible, programmatically-associated name for a form control.
A single-line text field, and the states every other form control follows.
A multi-line text field for longer answers, with optional character counting.
Choose one option from a known list, with typeahead and full keyboard support.
Search and select one option from a long static or asynchronous dataset.
Selects zero or more options, including the mixed state for partial groups.
Choose exactly one option from a small set shown at the same time.
Turns something on or off, committing the change immediately.
Captures or displays an ordered score with accessible star controls.
A short, non-interactive label reporting status or category.
- ⌘K
A semantic key cap for keyboard shortcuts and interaction guidance.
A compact count or dot announcing unread activity on a control or destination.
- Ana Prasetyo is online
Identifies a person, team or project, falling back to initials.
Q3 marketing site
Updated 2 hours ago
A bordered container grouping related content into one unit.
Review required
One setting needs attention.A contextual message communicating status, consequence or a next step.
A brief non-blocking notification for success, error, warning or information.
Preserves predictable content geometry while nearby data is loading.
68% complete
Communicates determinate or indeterminate completion in a horizontal track.
A compact standalone indicator for an indeterminate loading state.
Member Status Ana Active Semantic primitives for structured rows, columns and selected data.
Workspace
Members and permissions
A horizontal or vertical boundary between adjacent content groups.
Switches between sibling views inside one page, without navigating.
A horizontal set of peer destination links with a current-page state.
Shows hierarchical location and links back to parent destinations.
Moves through a known number of result pages with compact boundaries.
A stacked disclosure group for revealing secondary content in place.
Expands one independent region of optional secondary information.
A list of commands opened from a button, with submenus and shortcuts.
A focus-managed contextual surface anchored to an interactive trigger.
A short supplementary label revealed on hover or focus.
A modal surface that interrupts the task to ask for a decision.
A focus-trapped overlay panel entering from a viewport edge.
What every component guaranteesPermalink to this section
These hold across the whole set, so they are documented once here rather than repeated on every page.
- Built on semantic or component tokens — no component hardcodes a colour, radius or duration.
- The full state set where it applies: default, hover, pressed, focus visible, disabled, loading, error, selected and read-only.
- Keyboard operable, following the matching ARIA pattern, with focus visible at every stop.
- An accessible name for every interactive element, enforced by the type signature where one can be.
- Responsive behaviour designed for narrow viewports rather than inherited from the desktop layout.
- Reduced motion removes movement instead of shortening it.
- className is accepted and merged last, so any variant class can be overridden.
The previews are the real components
Every card above renders the component the package exports, not a picture of it. Open the dropdown, the dialog or the select and they behave exactly as they will in your product.