D

Design System

/Blocks

Composed patterns

Blocks

Pre-built compositions from the shadcn registry, pulled via bunx shadcn@latest add <name>. They live in src/components/ and /src/app/ as shadcn expects — the token bridge in globals.css styles them automatically.

shadcn registry

Application

Dashboard

dashboard-idp

Application

Orbit IDP dashboard — metric grid, recent deployments, pipeline + activity split, and build output console. Composed from Orbit atoms and data composites; matches the _reference/Orbit IDP.html default surface.

src/app/design/dashboard/page.tsx + src/components/{orbit,data,layout}/*

Section cards

section-cards

Application

4-up KPI grid with gradient cards, trend badges, and caption footers. Container-query responsive.

src/components/section-cards.tsx

Settings dialog

settings-dialog

Application

Modal with embedded SidebarProvider — category list on the left, content on the right.

src/components/settings-dialog.tsx

Navigation

Sidebar · app

app-sidebar

Navigation

Full application sidebar — team header, nav-main, documents, secondary section, and user footer. Collapsible=offcanvas.

src/components/app-sidebar.tsx

Site header

site-header

Navigation

Top bar that pairs with AppSidebar — sidebar toggle + breadcrumb + utility actions.

src/components/site-header.tsx

Search form

search-form

Navigation

Sidebar-aware search input wrapping a form. Drop inside a SidebarHeader for docs-style nav.

src/components/search-form.tsx

Team switcher

team-switcher

Navigation

Multi-team dropdown with per-item shortcuts and Add-team affordance. Mount in SidebarHeader.

src/components/team-switcher.tsx

Version switcher

version-switcher

Navigation

Documentation version picker — dropdown with current-selection check mark.

src/components/version-switcher.tsx

Auth

Login

login-01

Auth

Standard email-and-password login with branded wrapper. Form uses shadcn Field primitives. Mount under src/app/ when wiring a real auth route.

src/components/login-form.tsx

Open route Live demo

Data

Data table

data-table

Data

TanStack Table + dnd-kit sortable rows. Columns with checkbox selection, status badges, inline editing, drawer row viewer.

src/components/data-table.tsx

Date

Calendar · single

calendar-01

Date

Single-date picker with shadcn Calendar primitive.

src/components/calendar-01.tsx

Calendar · range

calendar-18

Date

Range picker variant, ideal for report filters.

src/components/calendar-18.tsx

Data viz

Chart · area

chart-area-default

Data viz

Smooth area chart backed by Recharts with tooltip + legend.

src/components/chart-area-default.tsx

Chart · area (interactive)

chart-area-interactive

Data viz

Interactive time-range area chart with Select + ToggleGroup window controls.

src/components/chart-area-interactive.tsx

Chart · bar (interactive)

chart-bar-interactive

Data viz

Bar chart with series toggles and animated hover state.

src/components/chart-bar-interactive.tsx

Chart · line

chart-line-default

Data viz

Line chart with multiple series and gridlines.

src/components/chart-line-default.tsx

Chart · pie

chart-pie-simple

Data viz

Minimal pie chart with legend.

src/components/chart-pie-simple.tsx

Chart · radial

chart-radial-simple

Data viz

Circular gauge / radial bar for single-value KPIs.

src/components/chart-radial-simple.tsx