Duck Stat Grid
The hairline grid: one border colour showing through a 1px gap, with the cells painted on top.
DisplayServer safe
Preview
- Runtime deps
- 17down from 47
- JS shipped
- 76 kBremoved
- Components
- 49one file each
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/duck-stat-gridPulls in @duck/theme, @duck/hud-label. Already installed items are skipped.
Usage
import { DuckStatGrid, DuckStat } from "@/components/ui/duck-stat-grid"The file lands in components/ui/duck-stat-grid.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | 2 | 3 | 4 | 3 | Columns above the sm breakpoint. Always one below it. |
| bordered | boolean | true | Draw the outer edge as well as the inner rules. |
| label | React.ReactNode | - | On a stat: the HUD label. Read before the value. |
| value | React.ReactNode | - | On a stat: the number. Tabular figures. |
| hint | React.ReactNode | - | On a stat: a delta, a unit, a date. |
Rules
What keeps this component from turning into noise.
- gap-px over a --border background beats a border per cell: no doubling on shared edges, nothing to reset on the first column, and exactly one device pixel at any zoom.
- Cells are --background rather than --card on purpose — the grid reads as the canvas divided up, not as a row of floating panels. Pass bg-card on a cell if a panel is what you want.
- It is a definition list, so the label is announced before the value even though the value leads visually.