Components

Hover Background (Radix UI)

An interactive background component with animated objects that respond to hover interactions and customizable colors.

Installation

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

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

Prop	Type	Default
`objectCount`	~~enum~~	12
`children`	~~ReactNode~~
`className`	~~string~~
`colors.background`	~~string~~	~~"bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"~~
`colors.objects`	~~string[]~~	~~["bg-cyan-400/20", "bg-purple-400/20", "bg-fuchsia-400/20", "bg-violet-400/20", "bg-blue-400/20", "bg-indigo-400/20"]~~
`colors.glow`	~~string~~	~~"shadow-cyan-400/50"~~

On This Page