CSS Background Pattern
Pure-CSS, full-bleed patterned backdrops for hero, section and card surfaces. Every line uses the --color-border-tertiary token, so the whole family flips in dark mode.
$
Registry itembunx shadcn@latest add @nx-ui/css-background-patternInstalls withutils
All seven variants
Grids and diagonal crosses, plainly tiled or radially masked to fade toward a centre or edge. Each fills its positioned container.
basic-grid
diagonal-cross-grid
center-fade-diagonal-cross-grid
bottom-fade-grid
top-right-fade-grid
bottom-right-fade-diagonal-cross-grid
top-fade-dashed-grid
Behind content
A center-fade cross grid behind a Nexus call-to-action — the pattern reads as texture, never competing with the copy.
Turn waste into worth
Track every collection round from kerbside to compost, across all your Nexus ReGen sites.
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | CssPatternVariant | "basic-grid" | — |
…extends React.ComponentProps<"div">