Button
A small action. A clear intention.
PRECISE PARTS. ORGANIC POSSIBILITIES. v0.5
Built on a grid.
Made to feel alive.
Thoughtful components for interfaces that feel like you.
Cool in tone. Soft in motion. Yours to build with.
The essentials55
Small squares. A whole new feel.
Your next idea starts here.
Input
An understated place for a thought.
PublishedDraftAvailablev0.2In review
Badge
Small signals with useful meaning.
Workspace
Room for your next idea.
A space to make something your own.
Card
A quiet frame for your content.
Switch
An immediate change, clearly expressed.
A little space for the bigger picture.
Your workspace was created today.
Tabs
Different views, one place.
Select
A familiar choice, thoughtfully styled.
Checkbox
Choose one thing. Or a few.
CHAMJL+3
Avatar
A person, even without a picture.
Time picker
Give a moment its time.
Color picker
Choose a single accent.
Attachment
Choose files, check the details.
Action bar
Actions for the current selection.
Combobox
Find a choice as you type.
September 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Calendar
A considered view of your days.
Date picker
Give your next idea a date.
Option select
A familiar choice, with a custom menu.
Toast
A small update, without interruption.
Page 1 of 12
Pagination
Move through a larger collection.
Alert dialog
Pause before a consequential action.
16 : 9
Aspect ratio
Keep things in proportion.
Button group
Related actions, kept together.
Toggle
An action with an on and off state.
Textarea
A little more room to express yourself.
Label
A clear name for every field.
This appears on your workspace.
Field
Label, control and feedback in one place.
Radio group
One choice from a considered set.
Slider
Find the right amount.
Number field
Precision, one step at a time.
| Project | Status | Updated |
|---|---|---|
| Studio website | Published | Today |
| Brand guidelines | Draft | Yesterday |
| Component library | In review | Sep 10 |
Table
Information that lines up.
Accordion
A little less, until you need more.
Collapsible
Details, on your terms.
A little breathing room.
For what comes next.
Separator
Just enough separation.
Scroll area
More content, within the same frame.
Find your way ⌘K
Keyboard key
A shortcut, made visible.
You're all set.
Your changes have found their place.
Alert
Something worth your attention.
Bringing it together68%
Progress
A clear sense of how far along.
Taking a moment
Spinner
A small sign that work is happening.
Skeleton
A familiar shape while content arrives.
Good things start here.
Add your first project to get going.
Empty state
Nothing here. A useful next step.
Breadcrumb
A trail back to where you started.
Dialog
A focused moment for a decision.
Sheet
A little space beside your work.
Popover
A useful detail, close at hand.
Dropdown menu
The right actions, within reach.
Hover card
A little context before you go.
Tooltip
A few helpful words.
| Coal | 4 | |
| Atlas | 12 | |
| Studio | 2 |
Data table
Useful data, ready to work with.
Create project
Invite teammate
Archive workspace
Command
Find an action without hunting.
Input group
A field with helpful context.
Design
Chip
A small, removable detail.
Toggle group
A few choices, kept together.
- Details
- Team
- Review
Steps
Know where you are in a process.
- Project createdA quiet beginning.
- Team invitedReady to build together.
Timeline
A clear sequence of events.
coal-project-001Copyable value
Copy the detail that matters.