# Plan Card

One plan: name, price, pitch, features and a full width Button.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/plan-card
```

## Usage

```tsx
import { PlanCard } from '@/components/fetaui/plan-card'

export function Example(props) {
  return <PlanCard name="Team" price="$24" period="per seat a month" pitch="For growing teams." features={features} action="Choose Team" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| name, price, period, pitch | string | required |
| features | string[] | required |
| state | default, current, recommended, selected | default |
| action | ReactNode | required |
| onAction, onSelect | () => void |  |
| animated | boolean | true |

## When to use

- In a row of plans.

## When not to use

- For a feature by feature view: use Comparison Table.

## Accessibility

- Current disables the Button and says so with a Badge.
- The card is an article named after the plan.
- Selected is a ring and a label on the Button, not color alone.

## Motion

- The card fades in and rises 8 px over 400 ms.
- The selected ring fades in over 150 ms.
- The Button presses to 0.98.
- With reduced motion, the card and ring appear at once.