Actions
Button
Icon Button
Floating Action Button
Button Group
Split Button
Like Button
Bookmark Toggle
Loading Button
Icon View Switcher
Copy to Clipboard
Inputs
Text Field
Textarea
Select / Dropdown
Combobox
Checkbox
Radio Button
Toggle / Switch
Slider
September 2026
123456789101112131415161718192021222324252627282930
Date Picker
File Uploader
Search Field
2
Number Input
Rating
Password Field
PIN / OTP Input
Color Picker
Rich Text Toolbar
Range Slider
0/120
Character Counter
Multi-select Dropdown
design-system
Tag Input
Autocomplete
$
Currency Input
Type a password
Password Strength Meter
:
Time Picker
+1
Phone Number Input
Feedback
Your trial ends in 12 days.
Alert / Banner
Changes saved
Toast / Notification
Modal / Dialog
Helpful hint
Tooltip
Toggletip
Progress Bar
Loading Spinner
Skeleton
Segmented Bar
This field is required
Inline Validation
1:30
Countdown Timer
A new version is available.
Actionable Banner
Changes saved
File uploaded
Invite sent
Toast Stack
Conversation archived
Undo Snackbar
Loading workspace...
Full-page Loader
Skeleton Table
Alert Dialog
💡
Tip: use semantic tokens instead of raw hex values.
Callout
Data Display
Recommended
Badge
A
Avatar
Preview
Card
| Company | Plan | MRR ↑ |
|---|---|---|
| Globex | Free | $0 |
| Acme Inc | Pro | $490 |
| Northwind | Business | $990 |
Data Table
Invoice #204
Invoice #203
Invoice #202
List
Design
Tag / Chip
Accordion
Divider
$90,239↑ 15% vs last week
Stat / Metric
▾ Components
Button.tsxInput.tsx
Tree View
ABC
+3Avatar Group
Order placed9:02 AM
Shipped2:15 PM
Out for deliveryPending
Timeline
⌘K
Keyboard Shortcut
Online
Status Indicator
const x = 42;
Code Block
Notification Dot
Q3-report.pdf
cover-image.png
File List
PlanPro
RenewsOct 12, 2026
Seats12 of 20
Definition List
Image
Product shot
Image Card
Filter Chip
| Free | Pro | |
|---|---|---|
| Team members | 5 | 20 |
| Storage | 5GB | 50GB |
| Support | Priority |
Comparison Table
4.8
2,341 reviews
Rating Summary
Upvote Control
Design tokens
Component library
Documentation
Sortable List
Vertical Divider
Create account
Verify email
Invite teammates
Progress Checklist
Sep 1 - Sep 30
Date Range Pill
Q3-report.pdf
Table Row Actions
1,20412%
Metric Delta
“This cut our onboarding time in half.”
RRachel, Ops Lead
Quote Card
Pro
$49/mo
Pricing Card
Toggle Card
Comparison Slider
Active users8,204
KPI Card
This design system atlas catalogs foundations, components...
Expandable Text
A
Verified Badge
QR Code Display
Overlay
Drawer / Side Panel
Popover
Content Switcher
Right-click here
Context Menu
Popconfirm
Bottom Sheet
Lightbox
Nested Dropdown
Slide 1
Carousel
Data Visualization
Line Chart
Bar Chart
Donut / Pie Chart
68%
Progress Ring
Sparkline
Gauge Chart
Heatmap
Stacked Bar Chart
Scatter Plot
Radar Chart
Funnel Chart
Waterfall Chart
A
B
C
D
Treemap
62% of target
Bullet Chart
Box Plot