Background & Atmosphere

Hover Grid Background

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

Preview

desktop only

Hover Grid Background

desktop hover preview

Desktop preview

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/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

className

Type
string
Default
-
Description
Additional classes merged onto the component.

rows

Type
number
Default
150
Description
Number of grid rows.

columns

Type
number
Default
100
Description
Number of grid columns.

colors

Type
string[]
Default
built-in palette
Description
Hover color palette.

boxClassName

Type
string
Default
-
Description
Classes applied to each box.

Reference

Aceternity Background Boxes