$koum design --components --visual-diff
The primitive showcase.
// every component, every state. this page is the visual diff.
›Wordmark<Wordmark/>
KOUMKOUMKOUM
›Cursor + PulseDot<Caret/> · <PulseDot/>
typingokwarnerrinfo
›Pills<Pill tone=...>
neutralemberokwarnerrinfo
›Keyboard hints<Kbd>⌘K</Kbd>
Press ⌘K to open palette · / to focus search · j/k to navigate rows · esc to dismiss
›Buttons<Button variant=...>
›Field + Input<Field/> + <Input/>
›Toggle<Toggle/>
›Card + KV<Card/> + <KV/>
loads.active427
carriers.online1,184
gmv.24h$182,440
status● green
p95.latency388ms
uptime.30d99.94%
›Block (terminal)<Block accent/>
╭─ STATE ──────────────────────────────────────╮ │ loads.active 427 │ │ carriers.online 1,184 │ │ gmv.24h $182,440 │ │ agents.healthy 24/24 │ ╰──────────────────────────────────────────────╯
›Stat tiles<Stat/>
LOADS.ACTIVE
427
+12
GMV.24H
$182K
+8.4%
P95
388ms
-12ms
ERR.RATE
0.21%
+0.04%
›Sparkbar<Sparkbar value=...>
MOMBASA → KIGALI
$84K
DAR → KAMPALA
$52K
NAIROBI → JUBA
$31K
›Table (j/k navigable)<Table/>
refrouteweightcarrieretastatus
LD-4192MBA → KGL12.4tVivo18h 24mactive
LD-4193DAR → KLA08.1tKobil14h 02mactive
LD-4194NBO → JUB22.8tTotal22h 41mqueued
LD-4195KGL → DAR06.2t——open
j/k or ↑↓ to navigate · ↵ to open
›Empty state<Empty/>
┌──────────┐ │ empty │ └──────────┘
no loads queued
$ koum --post-load to begin
›LiveStream<LiveStream module=...>
LIVE · loads.feed
›TypeOn