Pattern
Eight SVG tile patterns — grid, dots, cross, diagonal, checker, plus, waves, isometric — with edge fades and optional pulsing highlight tiles. The workhorse behind most hero sections.
csssvgzero-jsrsc2 files · 105 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/pattern.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs patternUsage
import { Pattern } from "@/components/opus/backgrounds/pattern";
<Pattern kind="dots" fade="radial" className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| kind | "grid" | "dots" | "cross" | "diagonal" | "checker" | "plus" | "waves" | "isometric" | "grid" | Tile shape. |
| color | string | — | Stroke/fill colour — any CSS colour. |
| size / stroke | number | 32 / 1 | Tile size and line width (px). |
| fade | "radial" | "top" | "bottom" | "x" | "none" | "radial" | Edge mask. |
| highlights | number | 0 | Randomly lit, pulsing tiles. |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Content rendered on top. |
Notes
- No canvas, no WebGL — only CSS gradients/masks and compositor-friendly transform animations.
- Server-component safe unless marked otherwise; animations stop under
prefers-reduced-motion.