# Promo Card

One offer in a quiet spot: brand on the tray, the offer in an inset card and one Primary Pill Button.

Tier: Free

## Installation

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

## Usage

```tsx
import { PromoCard } from '@/components/fetaui/promo-card'

export function Example() {
  return (
    <PromoCard
      brand="Acme"
      price="$179"
      description="Every block and motion component."
      meta="$179 lifetime access"
      actionLabel="Explore Acme Pro"
      onAction={openOffer}
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| brand | ReactNode | required |
| tag | string | Pro |
| price | string |  |
| title | ReactNode | Limited Offer |
| description | ReactNode |  |
| meta | ReactNode |  |
| actionLabel | string | Explore |
| state | default, ending, claimed |  |
| defaultState | default, ending, claimed | default |
| onStateChange | (state) => void |  |
| endsIn | seconds | 0 |
| laterPrice | string |  |
| laterLabel | string | after tonight |
| endingActionLabel | string | Claim before midnight |
| claimedTitle | ReactNode |  |
| claimedDescription | ReactNode |  |
| claimedMeta | ReactNode |  |
| claimedActionLabel | string | Open dashboard |
| claimedLabel | string | Paid |
| onAction | () => void |  |
| onClaimedAction | () => void |  |
| onExpire | () => void |  |
| animated | boolean | true |

## When to use

- One promo at a time, in a sidebar or settings.
- Ending only in the last 24 hours of a real deadline.

## When not to use

- For a fake deadline. The countdown must match the offer.
- More than once in a view.

## Accessibility

- A region named by its title.
- The countdown has the timer role, so it is not announced every second.
- The later price is struck with a real s element, and the words beside it say what it means.

## Motion

- The arrow moves 2 px up and right in 150 ms on hover and focus.
- Countdown digits roll each second, with no width change.
- Claim crossfades the offer in 240 ms and pops the mark, and the height stays locked.
- With reduced motion, the arrow stays still and digits swap.