BG Pattern - Grid
A decorative grid SVG pattern that fades outward — useful as a background embellishment for hero sections, cards, and empty states.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
Basic
Place the component inside a relatively positioned container. It renders an inline SVG sized to the chosen size prop.
Sizes
Three built-in sizes — sm (336x336), md (480x480), and lg (768x768, default).
Custom Color
The component inherits currentColor for its strokes. Override the color by passing a text color utility via class.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "lg" | Controls the overall dimensions of the SVG pattern. |
class | HTMLAttributes["class"] | — | Extra classes forwarded to the <svg> element. Use text color utilities to tint the grid lines. |
BG Pattern - Circle
A decorative concentric circle SVG pattern that fades outward - useful as a background embellishment for hero sections, cards, and empty states.
BG Pattern - Square
A decorative concentric rotated-square SVG pattern that fades outward — useful as a background embellishment for hero sections, cards, and empty states.