# Credit Top-up

Balance with runway and a 14 day trend, credit packs, a custom amount, auto top-up and Buy.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/credit-top-up
```

## Usage

```tsx
import { CreditTopUp } from '@/components/fetaui/credit-top-up'

export function Example(props) {
  return <CreditTopUp balance={5774} dailyUse={387} {...props} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| balance, dailyUse | number | required |
| trend | number[] | required |
| packs | CreditPack[] | required |
| defaultPack | number | 1 |
| card | { label, expires } | required |
| lowAfterDays | number | 3 |
| onBuy | (credits, price) => void |  |
| onChangeCard | () => void |  |
| animated | boolean | true |

## When to use

- For prepaid usage.

## When not to use

- For seats and plans: use Checkout.

## Accessibility

- The trend is one image with a text description.
- Running low is a label and a mark.
- Packs are native radios.

## Motion

- The panel fades in and rises 8 px over 400 ms, once.
- Rows fade in over 240 ms with a 40 ms stagger.
- Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
- With reduced motion, the panel appears in place and values swap at once.