║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Spotlight Card description: An interactive card with a spotlight hover effect that highlights content and enhances user engagement visually.

<ComponentPreview name="spotlightcard-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]" description="An interactive card component with spotlight hover effect" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="spotlightcard" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion" />

<Step>Copy and paste the following code into your project.</Step>

<p> <code>spotlightcard.tsx</code> </p> <ComponentSource name="spotlightcard" /> </Steps> </TabsContent> </Tabs>

Usage

import { SpotlightCard } from "@/components/ui/spotlight-card";

<SpotlightCard className="w-80 h-72" spotlightColor="34, 211, 238">
    <div className="w-full h-full flex flex-col items-center justify-center text-center">
      <h3 className="text-xl font-semibold mb-1">Spotlight Card</h3>
      <p className="text-sm text-muted-foreground">
        Hover to see the spotlight effect.
      </p>
    </div>
  </SpotlightCard>

API Reference

SpotlightCard

The root component that creates the spotlight effect card.

Props

<PropsTable rows={[ { prop: "spotlightColor", type: "string", default: "14, 165, 233", description: "RGB values for spotlight glow." }, { prop: "className", type: "string", default: "—", description: "Optional class for custom styling." }, { prop: "children", type: "ReactNode", default: "optional", description: "Content rendered inside the spotlight container." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║