# SpotlightCard

> A Card with the brand glow trailing the cursor, on a spring. It takes everything a Card takes and holds the hook itself, so a server page can use it as is. Its children keep the Card's layout and gap, over the glow. For tiles that should feel alive: a dashboard's numbers, a call to action.

Section: Motion. Docs: https://entrepta.vercel.app/docs/components/spotlight-card

## Install

```bash
npx @entrepta/cli@latest add spotlight-card
```

Files: `motion/spotlight-card.tsx`, `content/diamond.tsx`, `lib/icon.tsx`, `primitives/card.tsx`, `motion/spotlight.tsx`.
npm packages: `@phosphor-icons/react`, `class-variance-authority`, `motion`.
Comes with: `diamond`, `icon-lib`, `card`, `spotlight`.

## Usage

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

<SpotlightCard>
  <Metric label="balance" value={<Amount value={balance} />} />
</SpotlightCard>

<SpotlightCard variant="featured" size="xl" glow={800}>
  <CardTitle>Start <em>building.</em></CardTitle>
</SpotlightCard>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `glow` | `number` | 640 | Diameter of the glow in px |
| `variant, size` | `Card's` | - | default, featured, terminal or data; sm, md or xl |