# Account Health

A customer health card: score gauge, renewal countdown, five signals, an AI risk summary and the next step.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/account-health
```

## Usage

```tsx
import { AccountHealth } from '@/components/fetaui/account-health'

export function Example() {
  return (
    <AccountHealth
      account="Northwind"
      plan="Enterprise · $184,000 ARR"
      periods={periods}
      renewalLabel="Renews Dec 13, 2026"
      daysLeft={47}
      actionTitle="Schedule a QBR with Northwind"
      actionDetail="Usage dropped 18% in Analytics"
      actionLabel="Schedule QBR"
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| account | string | required |
| plan | string | required |
| periods | Record<string, HealthSnapshot> | required |
| period | string |  |
| onPeriodChange | (period) => void |  |
| renewalLabel | string | required |
| daysLeft | number | required |
| termDays | number | 365 |
| logo | ReactNode |  |
| model | string |  |
| loading | boolean | false |
| onRefresh | () => void |  |
| actionTitle | string | required |
| actionDetail | string | required |
| actionLabel | string | required |
| onAction | () => void |  |
| animated | boolean | true |

## When to use

- On an account page for customer success or sales.
- When the next step should sit beside the reasons for it.

## When not to use

- For a list of accounts: use Table.
- Without a real source for the score. Status colours imply it can be trusted.

## Accessibility

- A region named by the account.
- Status is never colour only: icons and labels repeat it.
- The gauge and the renewal bar have text names. Sparklines are decorative because the row states the value.
- The summary sets aria-busy while it refreshes.

## Motion

- The panel fades and rises 8 px in 400 ms.
- Rows fade in 240 ms, 40 ms apart.
- Changing the period tweens the gauge, sparklines and counts in 240 ms.
- The summary shows a shimmering skeleton while it refreshes, and the shimmer pauses offscreen.
- With reduced motion, the panel appears, values swap and the skeleton is static.