Components
Every component, wired to the same tokens.
The whole library in light and dark. Open one for its variants, its tokens and its code.
Accordion
Expand and collapse sections of content.
Action Sheet
A bottom-anchored list of actions for one object.
AI
A message thread, streaming and failed answers, and the prompt composer.
Alert
A dialog that stops the flow to say what happened and offer the way out.
Avatar
A person or entity as a photo, initials or an icon.
Badge
Small labels for status, category and count.
Breadcrumb
Shows where a screen sits in a hierarchy.
Button
Weight tells people which action matters most.
Card
Groups related content and actions into one surface.
Chart New
One chart type for each common data shape, on a shared set of series colors.
Checkbox
Select one option, several, or none.
Chip
Compact controls for filtering, choosing and user added entries.
Context Menu
Press and hold actions for one object.
Divider
Separates content into groups with a single line.
Drawer
A panel that slides in from the edge so filters and navigation never take the user off the screen.
Dropdown
A short list of options anchored to the control that opened it.
File Upload
Add a file, then see progress and errors.
Input
Collects text, numbers and passwords with a label, a hint and an error.
List
Rows of related items with a leading visual, text and an action.
Modal
Interrupts the screen with a decision that has to be made.
Navigation
Moves people between the main sections of an app.
Pagination
Shows how many pages there are and where the reader is.
Picker
Choose a date or a range from a calendar.
Progress
A spinner for an unknown wait, a bar for a known one.
Progress Steps
Shows how many steps a flow has and how far through it someone is.
Radio
Choose exactly one option from a set.
Rating
Shows a score out of five and collects one.
Search
Find content by typing, with an optional voice input.
Segmented Control
Switches between two to five views of the same content.
Skeleton
Holds the shape of content while it loads.
Slider
Set a value or a range by dragging along a track.
Tab
Switches between related views inside one screen.
Table New
Rows of data with a pinned lead column, sideways scroll and sortable headers.
Toast
Reports what just happened without blocking the screen.
Toggle
Turns a single setting on or off, applied immediately.
Toolbar
Holds the actions for the current screen.
Tooltip
A short contextual hint anchored to an element.
Top Bars
The screen header: title, back affordance and actions, in a compact and a large size.
Your next rebrand is one edit.
One-time payment, Lifetime updates, Unlimited client projects