BG Pattern - Circle
A decorative concentric circle 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 circles. |
Badge Group
A pill-style badge group that pairs a labeled addon with a short message, available in light and modern themes with leading or trailing alignment.
BG Pattern - Grid
A decorative grid SVG pattern that fades outward — useful as a background embellishment for hero sections, cards, and empty states.