# Spotlight card

> A card lit by a spotlight that follows the pointer, border included.

Component · Free · https://lodeui.com/components/spotlight-card

## When to use

- Feature grids and pricing cards on marketing pages.

## When not to use

- Dense app UI where hover effects distract.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/spotlight-card.json
```

## Usage

```tsx title="example.tsx"
import { SpotlightCard } from "@/components/ui/spotlight-card";

export function Feature() {
  return <SpotlightCard className="p-6"><h3>Fast by default</h3></SpotlightCard>;
}
```

## API reference

### SpotlightCard

A card lit by a soft light that follows the pointer, including on its border.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| color | `string` | `10% foreground` | Light color. |
| size | `number` | `360` | Light radius in px. |

## Accessibility

- The light layers are aria-hidden and hidden under reduced motion.

## Motion

- Follows the pointer; fades in on hover.

## Responsive behavior

- Touch screens just see the card.

## Performance

- Updates CSS variables, not React state.

## Notes for AI

- Put interactive content inside as normal.

## Related

- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.
- [Border beam](https://lodeui.com/components/border-beam) — A light that travels around an element's border.
- [Magnetic](https://lodeui.com/components/magnetic) — Makes any element lean toward the pointer and spring back.