@vector-stack-usa/ui
Live preview of every component shipped today, plus the canonical size scale and the queue of components still missing. Edit any source file under src/components and Next.js HMR reflects in milliseconds — no build, no bump, no rebuild.
Size scale
Canonical dimensions for v0.6.0+. Bump touches every consumer.
| Component | Dimensions |
|---|---|
| Standard size | 24px (h-6) · text-[11px] · rounded-[4px] — Button, Input, Select, StatusChip default |
| Button | h-6 · text-[11px] · px-2.5 · gap-1 · rounded-[4px] · font-semibold |
| Input | h-6 · text-[11px] · px-2 — matches Button. No size variants. |
| Select | h-6 · text-[11px] · pl-2 pr-7 — matches Input. No size variants. |
| StatusChip sm (default) | h-6 · text-[11px] · rounded-[4px] |
| StatusChip xs | h-5 · text-[10px] · rounded-[3px] — only component with a compact variant |
| Spinner | h-3 w-3 (12px) · border-[1.5px] · animate-spin |
| Progress track | h-[9px] · rounded-[3px] · 1px solid border, recess inset shadow, outer halo glow in tone color (only when filled) |
Palette
Live tokens from colors.css. Click any swatch to edit it with HSL sliders — changes apply instantly to every component on this page and persist in localStorage. Use 'Reset to default' to revert. Toggle dark mode to edit the dark-theme value of the same token independently.
Input
3 sizes (sm / md default / lg) × states. Always renders inside a flex-col wrapper with optional label + helper/error.
Checkbox
Custom box matching primary. States: default / checked / disabled / error.
Radio
Group via shared `name`. Pick exactly one.
Toggle
32×16 pill switch. Use for binary on/off (auto-reprice, dry-run, sandbox).
Select
Native <select> wrapped to match Input. Single 24px size.
Field
Generic label + helper/error wrapper. Use it around anything that isn't already an Input/Select (e.g. a Checkbox group, a custom date control).
Card
4 variants — default / muted / compact / compactMuted. Just a div with border + shadow.
StatusChip
6 tones × 2 sizes (sm default, xs compact) × with/without dot. Use for inline status labels and table cells.
TagWithInfo
Hover any chip below to reveal popup. Harvested from repricer table tags.
Tabs
Controlled or uncontrolled. Used to break long pages without losing the visual identity.
Overview panel — the active tab is overview.
Avatar
Image OR initials (auto from name, color hashed). 4 sizes — xs / sm / md / lg.
Spinner
Indeterminate "still working" indicator. Single size (12px). For determinate % use Progress.
Progress
Determinate (0–100%) and indeterminate variants. Use determinate when you have a measurable %, indeterminate when you don't (slides infinitely).
Skeleton
3 shapes — line / block / circle. Shimmer animation respects prefers-reduced-motion.
EmptyState
Replaces literal 'No items yet' copy across surfaces.
Tooltip
Lightweight hover/focus tooltip for icon buttons + table cells. For tag-shaped triggers use TagWithInfo.
Pagination
Compact page-number variant with prev/next steppers, ellipsis, and an optional inline page-size selector.
Table primitives
<Table> + <TableHead/Body/Row/Cell/HeaderCell> — same look every consumer was already hand-rolling.
| SKU | Title | Status | Price | |
|---|---|---|---|---|
| ZX-000005936 | Under Armour Blitzing cap | positive | $22.99 | |
| ZX-000007112 | Nike Pro shorts | caution | $34.50 | |
| ZX-000009401 | Adidas Originals trefoil tee | critical | $48.00 |
CountUp
Animates a number from 0 (or `from`) to `value` over `duration` ms with easeOutCubic. Re-animates when value changes.
InfoCard
Bigger sibling of AppTile — full feature/integration card with icon-box, title, description, optional badge. 7 tones (same as AppTile).
Auto-fill listings from supplier data with the dual-branch dual-model pipeline.
Match the buy box, undercut by a configurable amount, or follow lowest offer — across multi-marketplace accounts.
Listings, orders, inventory across Amazon / eBay / Walmart / TikTok Shop in one console.
Qwen3 + Mistral on-prem, 12-month phased plan from teacher → distillation → per-task LoRA.
TC52 + Qualcomm devices for warehouse pick/pack flows. Gradle build, signed releases.
Self-hosted SearXNG over WireGuard for the AI stack's web-grounding tool.
PageState
Bigger empty/error/loading/success layouts for full-page contexts. Use as the entire main when there's nothing else to render.
No listings yet
Connect an Amazon SP-API token and we'll prefill your first 100 listings automatically.
- SP-API tokens with seller-scope are required.
- The repricer will run a dry-run on import.
- Skip the connection if you only want to manage listings manually.
Couldn't load
Network error · code 502
Generating report…
This usually takes 10–20s.
All set
Your store is connected and syncing.
DiffViewer
Line-by-line text diff. Tone-tinted bg for added (positive) and removed (critical) lines. Unified or split layout.
11 workers:22 - amazon-listings33 - amazon-orders4+ - amazon-feed45 - keepa56 repricer:6− default_strategy: buy_box7+ default_strategy: lowest_offer78 undercut_pct: 0.59+ cooldown_seconds: 60
1{ "tone": "primary",2 "size": "md",3 "variant": "solid" }
1{ "tone": "primary", 2 "size": "sm",3 "variant": "ghost",4 "halo": true }
Alert
Full-width inline banner. Different from Toast — sits in the document flow, persists, and can carry actions. 5 tones with default icons; supports a dismiss button.
InlineEdit
Click a value to edit it inline. Enter or check button to commit, Esc or × to cancel.
TagInput
Input that turns Enter / comma into a tag chip. Backspace on empty input removes the last tag. Paste comma-separated text to bulk-add.
Splitter
Two resizable panes separated by a draggable divider. Hover the divider to see the resize cursor.
Drag the divider on the left to resize. Min 15%, max 85%.
SegmentedControl
Pill-style single-select toggle group. Use for view-mode switchers (Day / Week / Month), filter scopes — anywhere there are 2–5 mutually-exclusive options.
Rating
Star rating. Click to set, hover to preview, supports half-stars via step={0.5}. Read-only mode for displaying averages.
Tree
Hierarchical list with expandable folder nodes. Use for category navigation, file explorers, taxonomy.
CalendarHeatmap
GitHub-style activity grid. 7 rows (days of week, Sun→Sat) × N columns (weeks). Cell intensity bucketed by max value in the data.
NumberInput
Numeric field with −/+ steppers + format/parse hooks for currency, percent, etc.
InputGroup
Wrap an Input/NumberInput with text or button addons on either side. Useful for $ prefix, .com suffix, http:// prefix, /h suffix, etc.
MetaList
Definition-list-style label:value pairs for 'Order details', 'Account info', etc. Two layouts.
- SKU
- ZX-000005936
- ASIN
- B07ABC1234
- Brand
- Under Armour
- Marketplace
- United States
- Status
- LiveRepricer last ran 3 min ago
- Stock
- 47
- Order ID
- ord_3rABC123XYZ
- Customer
- Alice Andersonalice@example.com
- Total
- $124.50
- Placed
- 2 minutes ago
FileUpload
Drag-and-drop dropzone + click-to-select. Lists picked files with per-file remove buttons.
CommandPalette
Cmd+K-style modal with fuzzy search across a flat command list. Esc + click-outside dismiss; ↑/↓/Enter to navigate.
Slider
Numeric range input. Primary fill on the left of the thumb. Optional tickmarks + value display.
PinInput
Single-character cells for OTPs / verification codes. Auto-advances on type, Backspace moves back, paste distributes across cells.
CodeBlock
Pre/code container with mono font + recess shadow + inline copy button. Optional language label, title, line numbers, max height.
npm install @vector-stack-usa/ui
import '@vector-stack-usa/ui/colors.css';1import { Button, ToastProvider, useToast } from '@vector-stack-usa/ui';2 3export default function App() {4 const toast = useToast();5 return (6 <ToastProvider>7 <Button onClick={() => toast.push({ tone: 'positive', title: 'Saved' })}>Save</Button>8 </ToastProvider>9 );10}{
"name": "@vector-stack-usa/ui",
"version": "0.25.1"
}Popover
Click-triggered floating panel. Heavier than Tooltip — supports interactive content like forms and action buttons. Click outside or Esc to dismiss.
Kbd
Typographic visual for keyboard shortcuts.
Stepper
Multi-step progress indicator. Use for wizards, onboarding, multi-step forms. Horizontal default; pass orientation='vertical' for sidebar wizards.
- AccountEmail + password
- 2PlanPick a tier
- 3PaymentCard details
- 4Done
- Connect Amazon
- Sync inventory
- Run pricing rulesAPI token expired
- 4Activate
- Catalog ingested2,400 items
- Embeddings computedQwen3-32B · 2m 14s
- 3Reviewing duplicates38 in queue
- 4Publish
Timeline
Event list with dots + connector. Vertical (default) for audit logs / activity feeds. Horizontal for status flows / deploy history / order tracking.
- Order placed2m agoCustomer checked out · 3 items · $124.50
- Payment captured2m agoStripe · pi_3R…ABCD
- Picked up by carrier1h agoUPS · tracking 1Z999
- Delayed at hub6h agoWeather event in MEM
- In transitYesterday
- Delivery exception14:32Address unreachable; rescheduling
- 12:42Build8m 14s
- 12:50Test342 passed
- 12:51LintNo issues
- 12:52StageDeployed
- 12:54SmokeSlow homepage
- —ProdPending approval
- Apr 22Ordered
- Apr 23Picked
- Apr 24In transit
- Out for delivery
- Delivered
Charts (Sparkline · BarChart · LineChart · DonutChart)
SVG-only, no external deps. All inherit tokens + tones from the design system. Hover charts to see values.
StatCard
KPI / metric tile. Label · big number · optional delta with trend arrow · hint line. Bottom of the card carries a 1px gradient accent in the tone (full→0 alpha L→R) so a row reads as one data strip.
Drawer
Slide-in panel from the side. Use for long-form edits or 'details about a row' without leaving the page. Backdrop + Esc + click-outside dismiss.
Accordion
Collapsible sections list. Single-open by default; pass `multiple` to allow several open at once.
ExpandPanel + ExpandableRow + ExpandedRow
Inline detail panel revealed under a table row. Pattern from adm.nexus360.us/admin/inventory. Click any row below to open its panel. Tones paint a 3px coloured edge + soft halo (same hue family as AppTile / Progress).
| SKU | Title | Status | Stock | |
|---|---|---|---|---|
| ZX-000005936 | Under Armour Blitzing cap | positive | 47 | |
Detail Under Armour Blitzing capLast sale 2 days ago Avg price $22.99 Buy box Won | ||||
| ZX-000007112 | Nike Pro shorts | caution | 6 | |
| ZX-000009401 | Adidas Originals trefoil tee | critical | 0 | |
5 tones available on ExpandPanel: neutral · primary · positive · caution · critical. Each tones the 3px left edge + outer halo. Click ZX-000005936 / ZX-000007112 / ZX-000009401 above to see the three coloured variants.
Dropdown
Click trigger to open. Click outside, Esc, or pick an item to dismiss.
Combobox
Searchable select with keyboard nav (↑/↓/Enter/Esc). Group keys cluster items under headings.
MultiSelect
Searchable dropdown with multi-selection. Selected items render as primary-tinted pills inside the trigger; click × to remove or backspace on empty search to pop the last one.
Toast
Wrap your app in <ToastProvider>; call useToast().push(…) anywhere. Auto-dismiss in 4s by default.
DatePicker
Single mode and range mode. Range: pick start, hover to preview, then pick end. Click an earlier date during step 2 to restart.
AppTile + AppGrid
Launcher tile from the hub.vectorstack.us dashboard. Each tile has a colored icon-box (alpha-tinted from one hue) and a label; AppGrid wraps the responsive 2/3/6 column grid.
7 tones available: primary · blue · rose · teal · amber · emerald · violet. Tone gives you bg (alpha 0.10), border (alpha 0.25) and icon (full) from the same accent var, so each app carries its own identity color while every tile uses the same shape and motion.
AuthShell
Split layout for auth pages — left form, right hero. Pass <HeroRibbon> for the canonical signature visual.
Sign in
Enter your email and password to continue.
Modal
Click to open. Backdrop + Esc dismiss are wired by default.
AppShell + TopNav + Sidebar + Footer + PageHeader
The full layout primitive. Compose: <AppShell topNav={...} sidebar={...} footer={...}>{children}</AppShell>. Sidebar is fixed 240px on desktop, drawer on mobile (controlled by `open`). Showcase mounts the whole thing inside a sized iframe-style box so it doesn't take over the page.
Console
Real-time view of repricing activity across your accounts.
Five components composing one app skeleton: AppShell (structural grid), TopNav + TopNavItem (sticky header), Sidebar + SidebarSection + SidebarItem (240px desktop, drawer mobile via open prop), Footer (links + copy), and PageHeader (eyebrow + title + actions inside the main region).
HeroRibbon
SVG-animated ribbon — the public-landing hero on nexus360.us. Variants: full (animated) and quiet (static). The wrapper MUST be `position: relative` + `overflow: hidden`.
Pending components
Anything still missing from the catalog.