Spotlight Card

Use Spotlight Card to add a subtle pointer-following highlight to a bounded card. It works with any child content and can be disabled when the surrounding context needs a static surface.

Preview

Reduce motion:Off

Tune:Off

Inspect

Spotlight Card

Move your cursor across the card to reveal the spotlight.

Installation

Motion

npx shadcn@latest add @sona-ui/spotlight-card

Basic usage

project-card.tsx

import SpotlightCard from "@/components/ui/spotlight-card/spotlight-card";
 
export function ProjectCard() {
return <SpotlightCard>Project details</SpotlightCard>;
}

Examples

Adjust the glow color and size to fit the card surface. Disable the effect in static or dense contexts where it would compete with the content.

Usage


export default function SpotlightCardExample() {
  return (
    <SpotlightCard className="max-w-sm">
      <h3 className="font-semibold text-foreground text-lg">Spotlight Card</h3>
      <p className="mt-2 text-muted-foreground text-sm">
        Move your cursor across the card to reveal the spotlight that follows
        your pointer.
      </p>
    </SpotlightCard>
  );
}

API

Property	Type	Default	Description
`children`	`ReactNode`	`required`	The content rendered inside the card.
`className`	`string`	`—`	Additional CSS classes for the card.
`spotlightColor`	`string`	`"rgba(255,255,255,0.15)"`	The color of the spotlight glow. Accepts any CSS color value.
`spotlightSize`	`number`	`350`	The radius of the spotlight in pixels.
`disabled`	`boolean`	`false`	Disables the spotlight effect.

Accessibility

The spotlight is decorative. Ensure the card content has its own clear hierarchy and interaction states.

Styling

Use className for the card surface and its children. The effect follows pointer movement without changing the layout.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this page helpful?

Your response helps us improve component docs.