O
Orbit
/
Design System
Search, navigate, run a command…
⌘K
v0.1
~/design-system $ orbit explain
Orbit Design System
A shadow-as-border foundation for product surfaces. Next.js 16, Tailwind v4, shadcn primitives, ai-elements. Swap theme, accent, and variation live from the Tweaks panel (⌘.).
Start with tokens
Tokens
The load-bearing layer
Every color, radius, shadow, and type step is a CSS variable in @theme. Light + dark in one scope, shadcn bridge included.
Open
Components
Atoms → composites
Every Orbit atom + every shadcn primitive — Button, Badge, Card, Dialog, Sheet, Popover, Tabs, Inputs, Menus, and more. Every variant is rendered here.
Open
Feedback
Toasts, alerts, notifications
Sonner toast matrix (success/info/warn/error/loading/action/promise), shadcn Alerts, and the live NotificationsPanel sheet wired to /api/mocks/notifications.
Open
Navigation
Sidebars, switchers, headers
Orbit DesignSidebar, shadcn AppSidebar, nav-main / nav-projects / nav-documents / nav-user, team + version switchers, search form, site header.
Open
Blocks
Registry compositions
Calendars, Charts, Login form, AppSidebar, SettingsDialog, DataTable, and the Orbit IDP dashboard. Everything pulled with bunx shadcn@latest add.
Open
Conservative
Safe · data-dense
Deployments page with table, pipeline, activity, build output. The default layout mode for data-heavy surfaces.
Open
Confident
Bold · hero-led
Overview page with hero banner, stat panel, quickstart. For marketing-adjacent surfaces and first impressions.
Open
Experimental
Lab · terminal-forward
Ops page: mono-heavy, ASCII dividers, brutalist table. For oncall / incident / infra surfaces.
Open
ai-elements
AI UI under Orbit tokens
Conversation, PromptInput, CodeBlock, Tool. Every AI surface re-skinned to match the shadow-as-border system.
Open
Tweaks
Theme
Light
Dark
Accent
Variation
Safe
Bold
Lab
⌘. to toggle · ?tweaks=1 to open
Command palette
Search, navigate, or run a command