Explore
Components
Every approved component renders in all of its states — default, hover, focus, pressed, disabled, loading, error, success, empty, long text, and both themes. A component that cannot show its states is not approved.
Playground
10 first-party componentsControls
propsVariant
Size
Button
8 statesdefault
hover
focus
pressed
disabled
loading
error
success
Input
statesThis field is required
Helper text sits in a reserved slot.
Stat tile
honest dataApproved
10
in vault
Unknown metric
—
metric to confirm
Status + meter
approvedreviewingrejectedlive
4.8/5
2.1/5
Empty state
No components match these filters
Try clearing the license filter, or widen the framework selection. Discovery sources can be promoted into the vault once their license is verified.
Keyboard
Every surface is reachable by keyboard. Press ⌘K anywhere to search, ↑↓ to move, ↵ to open, esc to close.
State matrix
the approval requirementThe vault's approval gate is a state matrix, not a screenshot. Each first-party component below ships code for all eight interaction states and is verified in dark and light, at mobile width, and with overflowing content.
defaulthoverfocuspresseddisabledloadingerrorsuccessemptylong textmobiledarklight