Domain blocks
Task cards, issues, tickets, invoices, kanban, product tiles, chat. Every sample is exhaustive — each labeled row shows every status, priority, tone, size, and state so nothing is hidden. Person data is Sundanese sample fixtures.
KanbanColumn + KanbanCard
ClickUp-style board columns: a colored status pill (title + count folded in) over a tinted surface, hover-revealed header controls, and a collapse-to-strip toggle. Cards carry priority, labels (with overflow), meta, and hover quick-actions.
column colorPRIMARY2 SUCCESS2 INFO2 WARNING2 DANGER2 NEUTRAL2 HELP2
card priority
low priority card
medium priority card
high priority card
urgent priority card
rich card
UXgrowth+1
Design onboarding flow
423/5
collapsibleDONE2
column stateAT LIMIT3/3 DRAG OVER1 EMPTY0
TaskCard
Board / list task tile. Every status, priority, size, plus a fully-loaded card.
status
priority
IssueItem
GitHub / Linear issue list row. Every state plus label tones and a full-meta row.
state
#142opened by Ahmad
0
#141opened by Novi
1
#140opened by Azlan
2
#139opened by Muhvi
3
labels + meta
Expose severity on TaskCard priorityenhancementgood-first-issue
#150opened by Ahmad
5
Add Slack channel icon to TicketRowchoreblocked
#149opened by Numa
TicketRow
Support ticket list row. Every status, priority, SLA state, and channel.
status
priority
sla
channel
TKT-2420
Channel: email
Izz LuthfiEmailbillingeu-vat
LowSolved
TKT-2419Channel: chat
Xaviera SalmaChatbillingeu-vat
LowSolved
TKT-2418Channel: phone
Bayu ArsyalanPhonebillingeu-vat
LowSolved
TKT-2417Channel: web
Xabi ArryanWebbillingeu-vat
LowSolved
TKT-2416Channel: slack
Ahmad MuhyidinSlackbillingeu-vat
LowSolved
InvoiceRow
Invoice list row. Every status.
status
- INV-1042Ahmad Muhyidinahmad.muhyidin@contoh.idDraft$1,499.00
- INV-1041Novi Yantikanovi.yantika@contoh.idSent$1,399.00
- INV-1040Azlan Althafazlan.althaf@contoh.idOverdue$1,299.00
- INV-1039Muhvi Kavandramuhvi.kavandra@contoh.idPaid$1,199.00
- INV-1038Numa Raynatulnuma.raynatul@contoh.idCancelled$1,099.00
- INV-1037Zoya Qiarazoya.qiara@contoh.idRefunded$999.00
ProductCard
E-commerce product tile. Every size, badge tone, orientation, plus sale + rating states.
CartItem
Line item inside a shopping cart. Every stock state plus variant text and quantity bounds.
stock
Item · in_stockStock: in_stockIn stock
$29.00
Item · low_stockStock: low_stockLow stock
$78.00
Item · out_of_stockStock: out_of_stockOut of stock
$147.00
bounds
Linen throw blanket
$89.00
PriceTag
Formatted price. Every size and variant, plus strikethrough, period, savings, and locale.
size
$49.00$49.00$49.00$49.00
variant
$29.00$290.00Save 17%
state
$29.00, originally $39.00Rp 99.000,00€49.50
UserBadge
Avatar + name (+ role / email). Every variant, size, and the email-secondary state.
variant
Ahmad MuhyidinManajer ProdukNovi YantikaPerancang UIAzlan Althaf
size
Muhvi KavandraAnalis DataNuma RaynatulPengembang BackendZoya QiaraStaf Keuangan
email
Zoya Qiarazoya.qiara@contoh.id
RatingStars
Star rating display or input. Every size, color, precision, and state.
size
color
state
5(128 reviews)
LogLine
Structured log row. Every level plus highlighted, compact, and metadata states.
leveltrace[build]Log line at "trace" level debug[build]Log line at "debug" level info[build]Log line at "info" level warn[build]Log line at "warn" level error[build]Log line at "error" level fatal[build]Log line at "fatal" level
statewarnDeprecated API used in src/components/button.tsx:42 infoFetched 8 users (compact) errorRequest failedtrace=a1b2c3d4status500route/api/usersms812
ThreadMessage
Chat-style thread bubble. Every direction and delivery status, plus reactions, attachment, reply, and edited states.
direction
Ahmad Muhyidin
Pushed the v1 release candidate. Ready for QA.
09:12
Running the visual regression suite now.
09:15
Novi Yantika joined the thread.
status
Delivery status: sending
09:32
Delivery status: sent
09:32
Delivery status: delivered
09:32
Delivery status: read
09:32
Delivery status: failed
09:32
rich
Muhvi Kavandra
09:40(edited)
ChatInput
Chat composition input. Default, suggestions, loading, disabled, and counted states.
default
suggestions
state
0 / 120
FileRow
File browser row. Both variants plus uploader, actions, and mixed file types.
row
2.4 MBApr 17, 2026Ahmad Muhyidin
hero.png
480 KBApr 15, 2026
39 MBApr 10, 2026Numa Raynatul
card
design-tokens.json
92 KBApr 12, 2026
CommentItem
Forum / feed comment. Reactions, edit/delete affordances, and nested replies.
Great work on this. The new pricing page looks really clean.
Can we bump the "Most popular" badge 8px up on mobile?
On it — pushing a fix now.