Grid Backdrop
The lightweight standalone grid backdrop — the workhorse behind brand bands, testimonial panels and stat cards. Two crossing 1px gradients draw the grid; a radial mask fades it toward the edges. No config engine, no client boundary.
$
Registry itembunx shadcn@latest add @nx-ui/grid-backdropInstalls withutils
Tones
default draws navy lines for light surfaces; brand draws accent-yellow lines for dark navy surfaces.
tone=default
tone=brand
Masks
Named radial masks fade the grid from an edge or the centre — top, topLeft, left, center and bottom — so the texture never fights the copy.
top
topLeft
left
center
bottom
none
Cell size
cellSize sets the grid pitch in pixels — tighter for cards, looser for wide bands.
cellSize=24
cellSize=48
cellSize=96
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
tone | Tone | "default" | Line colour: navy on light surfaces, accent-yellow on dark brand surfaces. |
cellSize | number | 64 | Grid cell size in px (default 64). |
mask | string | gridMasks.top | Radial mask-image — pass a value from `gridMasks`, a custom gradient, or "none". |
className | string | — | Extra classes. Defaults place the layer at `absolute inset-0 -z-10` with a tone-appropriate opacity; override opacity/z-index/positioning here. |