Dashboard Grid | Zyeon UI

Preview in your theme

ready · 9 widgets on a 12-column grid, 7 rows tall — all 9 render; drag one over another and the neighbours push down, then float back up

onLayoutChange has not fired yet — drag a widget by its grip, or resize it from the corner handle.

Keyboard: Tab to a widget's grip (or its bottom-right corner handle), Enter to pick it up, arrow keys to move or resize by one cell, Enter to confirm, Esc to cancel.

MRR

$52,293+4.2%vs last month

Signups

539+6.1%this week

Churn

3.0%−0.9%30-day

p95 latency

227 ms±5.9%edge

Traffic

95,511+8.3%sessions, 30 days

Organic + referral, excluding bots

Checkout conversion

3.9%+7.5%cart → paid

5xx rate

0.4%−0.8%last 24h

Jobs queued

126±3.7%worker pool

Uptime

99.9%±9.2%90 days

empty · the default empty slot (pass emptyState to replace it)

No widgets on this dashboard

Add a widget and it will snap into the grid — you can drag and resize it from there.

loading · skeletonCount={5} — widget-shaped placeholders laid out on the same grid, so nothing jumps when the data lands

error · onRetry provided → clicking "Try again" really flips the branch to ready

Couldn't load this dashboard

The saved layout is safe — nothing was written while the data source was down.

degenerate data · columns={6} rowHeight={48} gap={12} · 9 entries in, 8 widgets out: the duplicate id is dropped, A and B claim the same cell, w=9 is clamped to 6, y=40 is pulled up by gravity, the pinned widget keeps row 5, and the 1-sample / zero-variance sparklines draw a flat line instead of nothing

Overlap A

641same cell

Overlap B — same x/y as A

634pushed below A

x = 5, w = 9 on a 6-column grid

6 colsclamped to the grid

w clamped to 6, then x clamped to 0

Pinned

row 5never displaced, never floated

A widget title long enough that the header has to truncate it instead of wrapping over the body

308 ms−1.2%

y = 40

gravity pulls it up

Zero variance

min === max

No metric, no series

Body renders the footnote alone

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro