Component UI
Components (13)

Spotlight Card

New

Interactive surface with radial cursor illumination, dynamic 1px masked border glow, and smooth 3D tilt perspective.

$ pnpm dlx shadcn@latest add @byphongphan/spotlight-card
Requires @byphongphan in components.json
card
Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/spotlight-card
Requires @byphongphan in components.json

Usage

import { SpotlightCard } from "@/shared/ui/core/spotlight-card"
export function Example() {  return (    <SpotlightCard enableTilt spotlightSize={300} className="p-6">      <h3 className="font-semibold text-foreground">Interactive Card</h3>      <p className="text-sm text-muted-foreground">        Move your mouse over this card to see the spotlight and 3D tilt effect.      </p>    </SpotlightCard>  )}

Props

PropTypeDefaultDescription
spotlightSizenumber280Diameter of the radial spotlight in pixels.
enableTiltbooleanfalseEnables 3D perspective tilt following cursor position.
glowRgbstringundefinedCustom RGB string (e.g. "220, 38, 38"). Defaults to adaptive light/dark values.
glowColor"neutral" | "primary""neutral"Preset color for the spotlight glow.
contentClassNamestringundefinedAdditional classes for the inner content wrapper.

Command Palette

Quick search and commands navigation