Grid Pattern
SVG grid background with a radial mask and optional highlighted squares.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
GridPatternProps
Also accepts all props of React.ComponentProps<"svg">
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 40 | Cell size in px |
| squares | [number, number][] | [] | Cells to fill, as [column, row] pairs |
| masked | boolean | true | Fade the grid out towards the edges |
Install
$ npx shadcn@latest add https://chromotion.dev/r/grid-pattern.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.