Button
A small action. A clear intention.
THE COMPONENT COLLECTION v0.5
Less noise.
More character.
Thoughtful components for interfaces that feel like you.
Warm by nature. Minimal by design. Yours to build with.
The essentials55
Small pieces. Endless possibilities.
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.
Native select
A simple choice with native behavior.
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.
Warm neutrals, precise details and components you own.
Absolutely. Every component comes with its source code.
Yes. Every color is backed by a light and dark theme token.
Accordion
A little less, until you need more.
Built with React and Base UI. Styled with Tailwind. Yours to change.
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.