# Interactive Card

> A working card: select it, act on it.

A checkbox for selection, quick actions that slide in on hover or focus, and a selected state that lifts and outlines it.

- Family: Cards
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/interactive-card/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add interactive-card
```

It installs to `components/galactrex/interactive-card.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { InteractiveCard } from "@/components/galactrex/interactive-card";

<InteractiveCard title="hero.png" selected={sel} onSelectedChange={setSel} actions={[…]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — | Title. |
| `children / media` | `ReactNode` | — | Body and visual. |
| `selected` | `boolean` | — | Selected state. |
| `onSelectedChange` | `(selected) => void` | — | Shows the checkbox. |
| `actions` | `{ label; icon; onSelect }[]` | — | Quick actions. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Asset library.** Grid of selectable files.

## Accessibility

- Real checkbox and labelled buttons; actions appear on focus too.

## Motion

- CSS transitions and a spring lift.
- Reduced motion: no slide.