Grid & Dot Pattern
SVG grid and dot backdrops with maskable depth.
- 0.8 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Grid pattern · Dot pattern
Texture that stays out of the way
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/grid-pattern.jsonAdds components/velora/grid-pattern.tsx.
Props
GridPattern
| Prop | Type | Default |
|---|---|---|
width | number | 40 |
height | number | 40 |
x | number | -1 |
y | number | -1 |
squaresCells to fill, as [col, row] pairs | Array<[number, number]> | — |
strokeDasharray | string | "0" |
Also accepts every <svg> attribute, forwarded to the root element.
DotPattern
| Prop | Type | Default |
|---|---|---|
width | number | 20 |
height | number | 20 |
cx | number | 1 |
cy | number | 1 |
cr | number | 1 |
Also accepts every <svg> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- Nothing changes: GridPattern and DotPattern are static SVG patterns with no animation.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Decorative; both SVGs are aria-hidden.