Components
46 components in @roger-emerson/ploxum-primitives (not yet on npm; vendor it per Getting started). Live, interactive versions of every component live on Storybook. 19 composites + templates ship via the registry CLI (npx ploxum add <name>).
Primitives (25)
| Component | What it does | Storybook |
|---|---|---|
PloxumProvider | Density + theme + mode context, MotionConfig bridge, localStorage persistence | Open ↗ |
Button | 4 variants (primary, secondary, ghost, destructive), 2 sizes | Open ↗ |
Input | Density-aware, leading/trailing slots, aria-invalid | Open ↗ |
Select | Native <select> styled to the palette, ChevronDown trailing | Open ↗ |
Checkbox | Tri-state (checked / indeterminate / unchecked) | Open ↗ |
Switch | Density-aware, focus ring matches token spec | Open ↗ |
Slider | Single + range, tabular numerals on value labels | Open ↗ |
Badge | 6 tones (neutral, amber, info, success, warning, critical) | Open ↗ |
StatusPip | Shape + color (circle/square/triangle/X) — never color alone | Open ↗ |
ProgressRing | Percentage ring with role="meter", ARIA-labelled | Open ↗ |
Spinner | Indeterminate, opacity-only pulse — no transform | Open ↗ |
Kbd | Keyboard shortcut chip, monospace | Open ↗ |
Icon | Self-hosted Material Outlined glyph set (@roger-emerson/ploxum-icons, no lucide runtime dep) + size-variant wrapper; strokeWidth is a no-op | Open ↗ |
Separator | Horizontal + vertical, subtle border tone | Open ↗ |
Tooltip (+ TooltipProvider) | Radix-backed, 280ms reveal, follow-cursor option | Open ↗ |
Gauge | 240° arc gauge — tone derived from warning/critical thresholds | Open ↗ |
TrendDelta | Signed delta with directional glyph; invertPolarity for down-is-good metrics | Open ↗ |
Meter | Linear utilization bar with threshold ticks + optional segments | Open ↗ |
Skeleton | Loading placeholder — opacity-only pulse, static under reduced motion | Open ↗ |
Avatar (+ AvatarStack) | Operator avatar with initials fallback + StatusPip; overlapping stack with +N overflow; colorFromName name-hash tint | Open ↗ |
HoverCard | Radix-backed pointer-only hover preview — rich card on dwell, focus-safe, not a menu | Open ↗ |
Disclosure | Headless collapsible — controlled/uncontrolled, trigger + trailing slots, chevron rotation | Open ↗ |
AnimatedNumber | Count-up tween for live values — reduced-motion snaps to final, tabular-nums | Open ↗ |
Marquee | Seamless infinite scroller (h/v) — pause-on-hover, edge fade, manual-scroll under reduced motion | Open ↗ |
ScrollArea | Overlay scrollbars on Radix — thin token thumb, hover-reveal, no reserved width | Open ↗ |
Patterns (21)
| Component | What it does | Storybook |
|---|---|---|
KpiTile | Headline number, label, delta, sparkline · tabular numerals · animate counts the value up · hoverContent adds a HoverCard breakdown | Open ↗ |
Card | Title / subtitle / toolbar slots, optional amber accent | Open ↗ |
AlertCard | Severity + status + entity + timestamp | Open ↗ |
Banner | Full-width P1 ribbon — motionless per heuristic 3 | Open ↗ |
EmptyState | Icon + title + description + action slot | Open ↗ |
TabBar | aria-selected, indicator bar, keyboard nav | Open ↗ |
Dialog | Radix-backed, focus trap, Esc-to-close | Open ↗ |
Popover | Radix-backed, does NOT trap focus (per heuristic 9) | Open ↗ |
Toast (+ ToastProvider) | Bottom-left stack ≤3, auto-dismiss for info | Open ↗ |
SidebarNav | Slot composables: Root + Group + Item + Footer + Brand | Open ↗ |
TopBar | Slot composables: Root + Section + LivePill + ReplayPill + Breadcrumbs | Open ↗ |
CommandPalette | cmdk wrapper · Root + Input + List + Group + Item | Open ↗ |
SegmentedControl | Exclusive-choice radiogroup, arrow-key nav, sm/md | Open ↗ |
DropdownMenu | Radix-backed compound menu · Trigger + Content + Item + Separator + Label, Kbd shortcut slot | Open ↗ |
ContextMenu | Radix-backed right-click menu · items, shortcuts, checkbox/radio, sub-menus · shares the DropdownMenu overlay | Open ↗ |
Sheet | Edge-anchored slide-out panel (Radix Dialog) · side/size, scrim, reduced-motion-gated slide | Open ↗ |
BottomSheet | Snap-point bottom sheet (peek/half/full) · velocity-aware drag, progressive scrim, keyboard control | Open ↗ |
Combobox | Searchable single/multi-select on cmdk-in-Popover · keyboard nav, disabled options | Open ↗ |
Stepper | Horizontal/vertical phase tracker · complete/active/upcoming, animated connectors | Open ↗ |
SlideToConfirm | Drag-to-confirm track for destructive actions · spring thumb, keyboard fallback | Open ↗ |
CountdownButton | Timer/cooldown confirm button · autostart, cooldown, composes Button | Open ↗ |
Plus the theme picker trio shipped from the same package — see Themes:
| Component | What it does | Storybook |
|---|---|---|
ThemeSwitcher | Dropdown listing registered themes with swatch rows | Open ↗ |
ModeToggle | Sun/Moon cycle button; renders null on single-mode themes | Open ↗ |
ThemePalette | Inline rail of theme cards for catalog UIs | Open ↗ |
Composites + templates (registry, 19 items)
These ship via the ploxum CLI rather than npm so consumers own the source.
npx ploxum init
npx ploxum add kpi-strip alert-center data-table ai-assistant-panel
npx ploxum add event-stream status-board timeline chart-frame pie-chart time-range-picker
npx ploxum add property-tree notification-menu resizable map-viewport sheet sidebar
npx ploxum add command-shell focal-canvas-page detail-drawer| Item | Tier | What it does | Storybook |
|---|---|---|---|
kpi-strip | composite | Horizontally-scrolling KpiTile row with consistent density | Open ↗ |
alert-center | composite | Filterable AlertCard list — filters by severity, status, entity | Open ↗ |
data-table | composite | TanStack Virtual table; virtualized from day one (24-row threshold) | Open ↗ |
ai-assistant-panel | composite | Streaming markdown chat panel with DOMPurify sanitization | Open ↗ |
event-stream | composite | Live activity feed with follow mode — newest events pin to the bottom | Open ↗ |
status-board | composite | Density-aware system-health grid — pips, deltas, sparklines | Open ↗ |
timeline | composite | Show timeline — phase bands, scrubbable playhead, cue markers, GO LIVE return | Open ↗ |
chart-frame | composite | Card-framed recharts wrapper + token-reading chartTheme | Open ↗ |
time-range-picker | composite | Popover time-window scoper — presets + range calendar | Open ↗ |
property-tree | composite | Recursive nested tree on Disclosure — branch nodes disclose, leaf nodes select, pips + trailing KPIs | Open ↗ |
notification-menu | composite | Bell-anchored dropdown — rows with inline acknowledge / archive / delete | Open ↗ |
resizable | composite | Draggable split panels (react-resizable-panels v4) — token rail, grip chip, persisted layout | Open ↗ |
map-viewport | composite | Zoom/pan chrome around a map SVG — wheel-zoom, clamped pan, imperative apiRef | Open ↗ |
sheet | composite | shadcn-aligned Sheet — flat SheetContent/Header/Footer/Title/Description over the Sheet primitive, data-slots | Open ↗ |
sidebar | composite | Collapse-to-icon rail — SidebarProvider context, Cmd/Ctrl+B + localStorage, tooltip labels when collapsed | Open ↗ |
command-shell | template | 4-zone layout (sidebar + topbar + focal canvas + collapsible right rail) | Open ↗ |
focal-canvas-page | template | Single-focus page with optional right rail | Open ↗ |
detail-drawer | template | Right-rail drawer that pushes (never overlays) the focal canvas | Open ↗ |
Catalog endpoint: registry.ploxum.com/r/index.json.
See it composed
The live demo wires every shipping component into a working operational dashboard across its WorkCentres (Overview, Venue, Security, Production, Workforce, Finance, and more) plus the themes catalog.