Packed design system

Warm, sunset-led React components.

A standalone shadcn registry. Add any component straight into your app with the shadcn CLI — it lands in components/ui and resolves its dependencies for you.

bunx shadcn@latest add https://ui.trypacked.dev/r/button.json

Components

Accordion
Packed Accordion — warm, token-driven UI on sand surfaces.
Alert
Push-style journey alert — gate changes, forecasts, and status updates.
Alert Dialog
Packed Alert Dialog — warm, token-driven UI on sand surfaces.
Avatar
Round avatar with image or coloured-initials fallback.
Badge
Compact pill label for statuses, counts and categories. Use success, info, warning, danger, and neutral for status dots.
Breadcrumb
Packed Breadcrumb — warm, token-driven UI on sand surfaces.
Button
Packed's primary action button — warm, rounded, with a soft brand glow on the primary variant. Use for the single most important action in a view.
Button Group
Packed Button Group — warm, token-driven UI on sand surfaces.
Calendar
Packed Calendar — warm, token-driven UI on sand surfaces.
Card
The warm surface container — Packed's workhorse layout primitive. White surface, soft border, generous radius.
Checkbox
Checkbox with label. Controlled.
Collapsible
Packed Collapsible — warm, token-driven UI on sand surfaces.
Command
Packed Command — warm, token-driven UI on sand surfaces.
Date Picker
Popover + calendar for choosing a single date — warm Packed styling on sand surfaces.
Dialog
Packed Dialog — warm, token-driven UI on sand surfaces.
Drawer
Packed Drawer — warm, token-driven UI on sand surfaces.
Dropdown Menu
Packed Dropdown Menu — warm, token-driven UI on sand surfaces.
Empty
Packed Empty — warm, token-driven UI on sand surfaces.
Eyebrow
Small tracked uppercase kicker. Sit it above a headline — never as body copy.
Field
Packed Field — warm, token-driven UI on sand surfaces.
Form
Packed Form — warm, token-driven UI on sand surfaces.
Hover Card
Packed Hover Card — warm, token-driven UI on sand surfaces.
Input
Text field with label, helper text, error state, and optional leading/trailing icons. Focus shows a warm brand ring.
Input Group
Packed Input Group — warm, token-driven UI on sand surfaces.
Input Otp
Packed Input Otp — warm, token-driven UI on sand surfaces.
Item
Packed Item — warm, token-driven UI on sand surfaces.
Kbd
Packed Kbd — warm, token-driven UI on sand surfaces.
Label
Packed Label — warm, token-driven UI on sand surfaces.
Logo
The Packed suitcase mark, and the Try Packed wordmark lockup for nav and footers.
Menubar
Packed Menubar — warm, token-driven UI on sand surfaces.
Navigation Menu
Packed Navigation Menu — warm, token-driven UI on sand surfaces.
Pagination
Packed Pagination — warm, token-driven UI on sand surfaces.
Popover
Packed Popover — warm, token-driven UI on sand surfaces.
Progress
Packed Progress — warm, token-driven UI on sand surfaces.
Radio Group
Packed Radio Group — warm, token-driven UI on sand surfaces.
Scroll Area
Packed Scroll Area — warm, token-driven UI on sand surfaces.
Select
Native select styled to match Input, with a custom chevron.
Separator
Packed Separator — warm, token-driven UI on sand surfaces.
Sheet
Packed Sheet — warm, token-driven UI on sand surfaces.
Sidebar
Packed Sidebar — warm, token-driven UI on sand surfaces.
Skeleton
Packed Skeleton — warm, token-driven UI on sand surfaces.
Slider
Packed Slider — warm, token-driven UI on sand surfaces.
Sonner
Packed Sonner — warm, token-driven UI on sand surfaces.
Spinner
Packed Spinner — warm, token-driven UI on sand surfaces.
Switch
On/off toggle with a soft sliding thumb. Use for settings and notification preferences.
Table
Packed Table — warm, token-driven UI on sand surfaces.
Tabs
Underline tab bar with optional icons and counts. Controlled via `value` + `onChange`.
Textarea
Packed Textarea — warm, token-driven UI on sand surfaces.
Toggle
Packed Toggle — warm, token-driven UI on sand surfaces.
Toggle Group
Packed Toggle Group — warm, token-driven UI on sand surfaces.
Tooltip
Packed Tooltip — warm, token-driven UI on sand surfaces.