Background Pattern
Untitled UI decorative SVG backdrops — concentric rings, grid, grid-check and dots — radially masked so they fade at the edges. Token-driven, so they flip in dark mode.
$
Registry itembunx shadcn@latest add @nx-ui/background-patternInstalls withutils
Used byempty-state
Four patterns
circle, grid, grid-check and dots, at the medium size. Each is masked with a radial-alpha gradient so it dissolves toward the edge.
circle
grid
grid-check
dots
Behind a featured icon
The signature composition: a ring pattern centred behind a featured icon, exactly the way empty states and modal headers use it.
Sizes
Three sizes — sm, md, lg — with progressively more rings/lines. Larger patterns suit hero sections; smaller ones sit behind a single icon.
sm
md
lg
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
pattern | PatternName | "circle" | — |
size | PatternSize | "md" | — |
…extends React.ComponentProps<"svg">