Try the buttons.
01 / Actions
Button
Three clear levels of emphasis. One consistent action.
The component collection
Start with something good.
Make it yours.
Useful components, live examples, and the code behind them. A neutral starting point for your next interface.
10 components
Your workspace
Make room for an idea.
A simple starting point for whatever comes next.
02 / Layout
Card
A flexible container for a focused piece of content.
Something short and memorable.
03 / Inputs
Text field
Labels, helpful hints, and clear validation.
Email updates
A weekly summary. Nothing more.
04 / Inputs
Switch
A simple choice with an unmistakable state.
Everything you need, in one quiet workspace.
Your latest change was saved just now.
Make this workspace feel like yours.
05 / Navigation
Tabs
Move between related views without losing context.
Can I change the colors?
Yes. Open Appearance to change the colors and corner radius across this library.
Where is the source?
Open a component and choose Code. The component file and styles are the same ones used in these previews.
06 / Navigation
Accordion
Keep the essentials visible. Open up the details.
A little space to focus.
07 / Overlays
Dialog
A focused space for a decision or a short task.
PublishedIn progressVersion 01
08 / Feedback
Badge
Small labels that give content a little context.
Project setup64%
09 / Feedback
Progress
Show where a task stands and what’s left to go.
All changes saved
Your workspace is up to date.
10 / Feedback
Notification
Confirm an action with a calm, useful message.