# Feature Card

> The feature card, done with care.

The icon tile turns and lifts, a hairline sweeps under the title, and a 'learn more' arrow slides in.

- Family: Cards
- Plan: Free. Free to install, no account.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/feature-card/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui add feature-card
```

It installs to `components/galactrex/feature-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 { FeatureCard } from "@/components/galactrex/feature-card";

<FeatureCard icon={<LayersIcon />} title="Layers">Masks and blend modes.</FeatureCard>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `ReactNode` | — | 24px icon. |
| `title` | `string` | — | Title. |
| `children` | `ReactNode` | — | Text. |
| `href` | `string` | — | Makes the whole card one link. |
| `index` | `string` | — | Step number. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Steps.** With an index like 01.

## Accessibility

- One focusable link with href.

## Motion

- Spring variants on hover and focus.
- Reduced motion: still.