D
Design System
/Components
Gallery

Components

Every atom and composite, every variant, rendered in-place. Source paths listed on each card — copy the patterns into product surfaces.
Orbit atoms
Button
4 variants × 3 sizes + icon-only. Uses radix Slot for asChild.
src/components/orbit/button.tsx
Badge
5 tones × shadow-bordered or solid · optional dot indicator.
src/components/orbit/badge.tsx
NeutralReadyBuildingQueuedFailed
v0.1PreviewDeployed
Metric grid
4 equal cells, inline sparkline, shared outer shadow.
src/components/orbit/metric.tsx
Deployments · 7d
247
+18
Avg build time
1m 12s
−9s
Success rate
99.8%
+0.2 pp
Active branches
18
+2
Sparkline
Line-only by default. Pass `area` for filled variant.
src/components/orbit/sparkline.tsx
Pipeline
Develop · Preview · Ship accents typed into the stage prop.
src/components/data/pipeline.tsx
Develop
feat/billing-v2
3 commits ahead
→
Preview
dpl_pK3m
building · 22s ETA
→
Ship
Requires approval
2 reviewers
Activity
Avatar + actor + verb + object + time.
src/components/data/activity.tsx
KP
Kian Park opened PR #482 feat/billing-v2
14m
RL
Rhea Lin promoted dpl_x8Ra → production
2h
DS
Dana Soto rolled back atlas-api to c45ff91
3h
··
scheduler deployed atlas-edge cron
3h
RL
Rhea Lin updated secret STRIPE_WEBHOOK_KEY
5h
Console / LogRow
Monospace log stream with level coloring. Fixed grid columns.
src/components/data/console.tsx
14:22:01ready$ installing dependencies · bun install
14:22:03inforesolved 1,204 packages in 1.87s
14:22:04info$ next build · v16.0.2
14:22:09infocollecting page data · 38 routes
14:22:14passtype-check · 0 errors in 4.2s
14:22:21warnroute /api/webhook/stripe uses dynamic rendering
Kbd
Keyboard-shortcut hint. 10px mono, fg-subtle, inset line ring.
src/components/orbit/kbd.tsx
⌘K⌘.⇧⌘QEnterEscjk
Icons
32 bespoke 16×16 stroke icons. Import <Icon name="…" />.
src/components/icons.tsx
dash
deploy
git
logs
db
key
team
settings
plus
search
bell
cmd
chev
dots
check
x
play
globe
fn
info
alert
clock
rocket
code
terminal
trash
edit
copy
refresh
ext
arrow-up
arrow-down
Feedback
Toast
Every sonner variant — success · info · warning · error · loading · promise · action.
src/components/ui/sonner.tsx
Alert
Inline, durable alerts. Default + destructive variants.
src/components/ui/alert.tsx
Badge (shadcn)
shadcn variants — default · secondary · outline · destructive. Different from Orbit Badge.
src/components/ui/badge.tsx
DefaultSecondaryOutlineDestructive
Progress
Radix Progress primitive. Animated width transition.
src/components/ui/progress.tsx
Skeleton
Pulsing placeholder for async content.
src/components/ui/skeleton.tsx
Spinner
Indeterminate loader.
src/components/ui/spinner.tsx
Empty
Zero-state pattern — icon, title, description, optional CTA.
src/components/ui/empty.tsx
No deployments yet
Push to any branch or import a project to see deployments here.
Forms
Input
Base text input with focus + invalid states.
src/components/ui/input.tsx
InputGroup
Compose prefix / suffix addons around an input.
src/components/ui/input-group.tsx
@
USD
Textarea
Auto-growing textarea.
src/components/ui/textarea.tsx
Select
Radix Select — styled dropdown.
src/components/ui/select.tsx
Combobox
@base-ui/react combobox — typeahead with filter.
src/components/ui/combobox.tsx
Native Select
Styled wrapper around the native <select> — full a11y, no portal.
src/components/ui/native-select.tsx
Checkbox
Radix Checkbox.
src/components/ui/checkbox.tsx
Switch
Radix Switch — two sizes.
src/components/ui/switch.tsx
Toggle / ToggleGroup
Segmented button group.
src/components/ui/toggle-group.tsx
Label
Radix Label primitive — wires to focusable peer.
src/components/ui/label.tsx
m@example.com
Field (composed)
FieldSet + FieldGroup + Field + FieldLabel + FieldDescription + FieldError.
src/components/ui/field.tsx
New deployment

Used as the subdomain.

Overlays
Dialog
Modal confirmation with Radix.
src/components/ui/dialog.tsx
Sheet
Side-anchored panel.
src/components/ui/sheet.tsx
Drawer
Vaul-powered bottom/right drawer.
src/components/ui/drawer.tsx
Popover
Radix Popover.
src/components/ui/popover.tsx
HoverCard
Non-modal hover-triggered card.
src/components/ui/hover-card.tsx
Tooltip
Deferred hover tooltip.
src/components/ui/tooltip.tsx
DropdownMenu
Radix DropdownMenu — items, checkbox items, submenus.
src/components/ui/dropdown-menu.tsx
Command
cmdk menu — inline here, wrap in Dialog for ⌘K palette.
src/components/ui/command.tsx
Navigation
Tabs
Keyboard-navigable segmented tabs.
src/components/ui/tabs.tsx
Deployment overview. Tab-switch with ← / →.
Accordion
Radix Accordion — single / multiple.
src/components/ui/accordion.tsx

Breadcrumb
Composable breadcrumb trail.
src/components/ui/breadcrumb.tsx
ScrollArea
Cross-browser styled scroll container.
src/components/ui/scroll-area.tsx
Row 1 · regional edge node
Row 2 · regional edge node
Row 3 · regional edge node
Row 4 · regional edge node
Row 5 · regional edge node
Row 6 · regional edge node
Row 7 · regional edge node
Row 8 · regional edge node
Row 9 · regional edge node
Row 10 · regional edge node
Row 11 · regional edge node
Row 12 · regional edge node
Row 13 · regional edge node
Row 14 · regional edge node
Row 15 · regional edge node
Row 16 · regional edge node
Row 17 · regional edge node
Row 18 · regional edge node
Row 19 · regional edge node
Row 20 · regional edge node
Row 21 · regional edge node
Row 22 · regional edge node
Row 23 · regional edge node
Row 24 · regional edge node
Row 25 · regional edge node
Row 26 · regional edge node
Row 27 · regional edge node
Row 28 · regional edge node
Row 29 · regional edge node
Row 30 · regional edge node
Data
Table (shadcn)
Unstyled, composable table primitive. Pair with tanstack/react-table for sort/filter.
src/components/ui/table.tsx
InvoicePeriodAmount
INV-104Apr 2026$240.00
INV-103Mar 2026$240.00
Avatar
Radix Avatar with image + fallback.
src/components/ui/avatar.tsx
RLKP··
Separator
Radix Separator — horizontal / vertical.
src/components/ui/separator.tsx
atlas-web
iad1
main
Kbd (shadcn)
Shadcn Kbd + KbdGroup. Larger and more declarative than Orbit Kbd.
src/components/ui/kbd.tsx
Enter⌘K
Carousel
Embla carousel with prev/next buttons.
src/components/ui/carousel.tsx
atlas-web
atlas-api
atlas-edge
atlas-admin
Collapsible
Radix Collapsible — show/hide a section.
src/components/ui/collapsible.tsx
Item
List-row composition: media / title / description / actions.
src/components/ui/item.tsx
atlas-web

Ready · 42ms · iad1

atlas-api

Ready · 18ms · sfo1

Groups
ButtonGroup
Segmented action bar with separators.
src/components/ui/button-group.tsx

Command palette

Search, navigate, or run a command