ReUI
Components

Grid Background

A responsive grid background with animated moving beams.

Installation

pnpm dlx shadcn@latest add https://reui.io/r/grid-background.json

Examples

Default

Loading

Hero

Loading

API Reference

PropTypeDefault
children ReactNode
gridSize enum "8:8"
className string
colors.background string"bg-slate-900"
colors.borderColor string"border-slate-700/50"
colors.borderSize string"1px"
colors.borderStyle enum "solid"
beams.count number12
beams.colors string[]["bg-cyan-400", "bg-purple-400", "bg-fuchsia-400", "bg-violet-400", "bg-blue-400", "bg-indigo-400", "bg-green-400", "bg-yellow-400", "bg-orange-400", "bg-red-400", "bg-pink-400", "bg-rose-400"]
beams.shadow string"shadow-lg shadow-cyan-400/50 rounded-full"
beams.speed number4
PreviouseGradient BackgroundNextHover Background