Geometric Background
Full-bleed geometric backgrounds — grids, dashed grids, diagonal crosses, and masked fades.
A full-bleed geometric layer. Drop it as the first child of a relative overflow-hidden
container and your content sits above it. Pick a look below — 99 patterns ported from
PatternCraft. The component itself just takes background,
backgroundImage, and backgroundSize; the picker fills them in.
pnpm dlx shadcn@latest add "https://godui.design/r/geometric-background.json?variant=purple-gradient-grid-right"Usage
tsx
import { GeometricBackground } from "@/components/godui/geometric-background";
<div className="relative overflow-hidden">
<GeometricBackground />
<YourContent />
</div>Props
The component bakes the selected variant's full style. It takes no custom props —
just the standard div attributes.
| Prop | Type | Description |
|---|---|---|
style | CSSProperties | Supply your own background. Setting any background key (background, backgroundImage, backgroundColor, …) replaces the baked default entirely. |
className | string | Extra classes on the layer (it is absolute inset-0 z-base). |
All other div attributes are forwarded.