# Spotlight card (goodtabs UI)

A card with a soft radial glow that follows the pointer and rests centred on touch.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/spotlight-card.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/spotlight-card`

## Usage

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

<SpotlightCard title="Instant search" description="Results land on the first keystroke." />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` |  | Heading at the top of the card. |
| description | `string` |  | One line under the title. |
| radius | `number` | `240` | Radius of the glow in pixels. |
| children | `ReactNode` |  | Anything rendered under the title and description. |

## When to use

- Feature grids on a landing page where a little light rewards the pointer
- A handful of cards that should feel alive without any colour
- Anywhere a plain card would do but the page has room for one quiet effect

## When not to use

- Dense lists and tables, where a moving glow distracts from scanning
- Cards that are mostly interactive controls; the glow adds nothing to a form
- When the consumer theme has no --glow token, since the light would be invisible

## Notes for agents

- Client component, but it takes no function props, so server components can render it directly
- The glow is a before pseudo element painted with the --glow token; it fades in over 150ms on a mouse pointer and sets no state on move
- On touch and under prefers-reduced-motion the glow stays centred at 60% opacity, so the still state reads on its own
- Content is plain children under the optional title and description; the card does not make itself a link or button

Docs: https://ui.goodtabs.co/components/spotlight-card