A shared language for better experiences.
Typography
Give every word a clear role.
DESIGN SYSTEM / COMPONENTS
From a shared language
to a working interface.
Explore 50 components with anatomy, guidance, working examples, and typed APIs.
Compact by defaultLight + darkReact + TypeScript
50 components
Main content
Supporting panel
Grid item
Span the right number of columns at each breakpoint.
Button
Act with a clear, specific label.
Icon button
A compact action with an accessible name.
Use a clear, recognizable value.
Text field
Collect one precise piece of information.
Text area
Give longer answers room to breathe.
Checkbox
Choose independent options.
Radio group
Choose one answer from a visible set.
Toggle
Apply a setting immediately.
Choose the stage of this release.
Select
Choose one option from a list.
Included foundationsChoose the foundations your team needs.
Multi-select
Find and choose several options.
Release date
Date picker
Choose a date in context.
Slider
Adjust a value within a known range.
Range slider
Choose a minimum and maximum together.
Project datesChoose the beginning and end of your project.
Date range picker
Choose the beginning and end of a period.
Drop files here, or browse.svg · .png · .jpg · .jpeg · .pdf · Up to 10 MB each
Files stay in this browser. This example does not upload them.
File upload
Select files with clear boundaries.
Design system
Tag
Add compact, scannable context.
Alert
Explain a state and the next useful step.
A new theme is ready — unread
Your latest changes are ready for review.
Notification
Keep people informed without losing context.
40%
Progress
Show completion without guessing.
Importing tokens
Spinner
Make brief waiting understandable.
Loading workspace
Skeleton loader
Preview the shape of arriving content.
- Tokens imported — complete
Your foundations are connected.
Today, 9:24 AM - Theme review — current
Check color, type, and density.
In progress - Publish release — upcoming
Approve the reviewed changes.
Timeline
Make a sequence of events easy to follow.
| Status | |||
|---|---|---|---|
| Button | 2.0 | Ready | |
| Text field | 2.0 | In review | |
| Menu | 2.0 | Ready |
Table
Compare structured information.
A place for your ideas
Build a shared language for every product your team creates.
Workspace
Card
Group related content and actions.
Continue with your workspace
or
Create a new design system
Divider
Separate content with restraint.
TMARJL
Avatar
Represent a person or team consistently.
Header
Orient people at the top of an experience.
Footer
Provide useful context at the end.
Sidebar
Make the workspace structure visible.
Breadcrumbs
Show location within a hierarchy.
A shared vocabulary for your product.
Tabs
Switch between related views.
Tab bar
Keep a small set of destinations close.
Stepper
Explain progress through a workflow.
Page 1 of 12
Pagination
Move through a bounded set of results.
Link
Make destinations recognizable.
Jump to details
Details
This section is the link’s destination.
Anchor link
Jump to a meaningful section.
Menu
Organize contextual actions.
Modal
Give one decision focused attention.
Drawer
Keep supporting work beside the page.
Backdrop
Separate a modal layer from its context.
Tooltip
Offer a short, optional explanation.
How do design tokens work?
Tokens connect repeatable design decisions to meaningful names, so a theme can change without rebuilding every component.
Accordion
Reveal supporting detail on demand.
Popover
Keep a small task near its trigger.
Room for your next idea
Add your first component to start a reusable library.
Empty state
Explain what is missing and how to begin.
Field label
Give every field a clear name.
A stable namespace for your design tokens.
Assistive text
Put useful guidance beside the decision.
Surface
Space creates a clear boundary around related ideas.
Box
Create a predictable content surface.
Stack
Arrange content with a consistent rhythm.
01
Design
02
Build
03
Review
Grid
Let content find its natural columns.