Background Pattern 128 - Offset dual-scale gridsPro
Closing CTA over two grids at different scales — a fine grid and a coarse grid shifted by half a cell — each faded with its own mask.
About Background Pattern 128
Closing CTA over two grids at different scales — a fine grid and a coarse grid shifted by half a cell — each faded with its own mask.
Background Pattern 128 is a pro background pattern block for React, built on shadcn/ui and Tailwind CSS. It ships as 68 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- grid
- layered
- offset
- cta
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/background-pattern-128Dependencies installed automatically: lucide-react.
Uses: button, reveal, utils.
Usage
import BackgroundPattern128 from "@/components/blocks/background-pattern-128"
export default function Page() {
return <BackgroundPattern128 />
}