Components

Grid Background (Radix UI)

A responsive grid background with animated moving beams.

Installation

pnpm dlx shadcn@latest add @toui/grid-background

This component is built using Motion primitives and includes the following custom props:

Prop	Type	Default
`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`	~~number~~	12
`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`	~~number~~	4

On This Page