grid-pattern-default
import { GridPattern } from "@/components/ui/backgrounds/grid-pattern"
export function Component() {
return (
<div className="flex w-full justify-center">
<GridPattern />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/grid-pattern-default.json"grid-pattern-large
import { GridPattern } from "@/components/ui/backgrounds/grid-pattern"
export function Component() {
return (
<div className="flex w-full justify-center">
<GridPattern variant="large" />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/grid-pattern-large.json"grid-pattern-small
import { GridPattern } from "@/components/ui/backgrounds/grid-pattern"
export function Component() {
return (
<div className="flex w-full justify-center">
<GridPattern variant="small" />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/grid-pattern-small.json"grid-pattern-custom
import { GridPattern } from "@/components/ui/backgrounds/grid-pattern"
export function Component() {
return (
<div className="flex w-full justify-center p-6">
<GridPattern width={100} height={10} />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/grid-pattern-custom.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/grid-pattern.json
Usage
import { GridPattern } from "@/components/ui/grid-pattern"<div className="relative h-64 w-full rounded-lg border">
<GridPattern variant="default" />
<div className="relative z-10 flex h-full items-center justify-center">
<p className="text-lg font-medium">Content over grid background</p>
</div>
</div>With squares highlighted
<GridPattern
variant="small"
squares={[
[2, 3],
[4, 1],
[5, 2],
]}
/>API Reference
GridPattern
Renders a customizable SVG grid pattern with optional square highlights.
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | variant | Width of each grid tile (overrides variant). |
height | number | variant | Height of each grid tile (overrides variant). |
x | number | -1 | X-axis offset for the pattern. |
y | number | -1 | Y-axis offset for the pattern. |
squares | Array | – | Array of grid coordinates to fill with highlighted squares. |
strokeDasharray | string | "0" | SVG stroke-dasharray for dashed lines. |
variant | "default" | "small" | "large" | "default" | Predefined pattern size & style. |
className | string | – | Tailwind/CSS classes applied to the <svg>. |
...props | SVGProps<SVGSVGElement> | – | Additional props for the <svg>. |
Variants
- default →
30x30grid, light stroke. - small →
10x10grid, denser lines. - large →
60x60grid, larger tiles with subtle fill.