Background & Atmosphere

Hover Grid Background

히어로 영역이나 기능 섹션에 쓰기 좋은, 호버에 반응하는 격자 배경입니다.

Preview

ambient background

move across the grid

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/background-boxes.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/background-boxes.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/background-boxes.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/r/background-boxes.json

Code

typescript

Copied

1import { BackgroundBoxes } from "@/components/background-boxes"23export default function Example() {4  return (5    <div className="relative h-96 overflow-hidden bg-slate-900">6      <BackgroundBoxes />7      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,transparent,rgba(15,23,42,0.96)_78%)]" />8    </div>9  )10}

Props

Prop	Type	Default	Description
className	string	-	Additional classes merged onto the component.
rows	number	150	Number of grid rows.
columns	number	100	Number of grid columns.
colors	string[]	built-in palette	Hover color palette.
boxClassName	string	-	Classes applied to each box.

Reference

Aceternity Background Boxes