# Cards

> Six interactive cards — account balance, expandable status row, referral, memo folder, story reel and creator profile — each with its own spring moment.

- Collection: Components
- Tier: pro
- Docs: https://geturui.com/docs/cards
- Install: `npx shadcn@latest add @geturui-pro/cards`
- Dependencies: motion, lucide-react

## Variants

### Account balance

Account balance that counts up, hides behind a privacy toggle and redraws its sparkline per period.

Install: `npx shadcn@latest add @geturui-pro/cards-account-balance`

```tsx
import { AccountBalanceCard } from "@/components/ui/cards/account-balance";

export function Wallet() {
  return <AccountBalanceCard balance={12480.36} onSend={openSend} onRequest={openRequest} onTopUp={openTopUp} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| balance | `number` | 12480.36 | Amount in major units. |
| currency | `string` | "USD" | ISO currency for formatting. |
| label / account | `string` | — | Account name and masked number. |
| periods | `AccountBalancePeriod[]` | — | { key, points, change } per sparkline tab. |
| defaultPeriod | `string` | — | Initially selected period key. |
| defaultHidden | `boolean` | false | Start with the amount masked. |
| onSend / onRequest / onTopUp | `() => void` | — | Quick action handlers. |

### Status row

Single-row card with a status line that springs open to reveal details and actions in place.

Install: `npx shadcn@latest add @geturui-pro/cards-status-row`

```tsx
import { StatusRowCard } from "@/components/ui/cards/status-row";

export function InvoiceRow() {
  return (
    <StatusRowCard
      title="Invoice INV-2042"
      subtitle="Kestrel AI · Due Oct 18"
      value="$1,150.00"
      monogram="KA"
      status={{ label: "Pending", tone: "warning" }}
      details={[{ label: "Method", value: "Bank transfer" }]}
      actions={[{ label: "Send reminder", primary: true }]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title / subtitle / value | `string` | — | Row content. |
| monogram | `string` | — | Letters in the leading tile. |
| status | `{ label: string; tone: "success" | "warning" | "danger" }` | — | Status under the value, with an icon. |
| details | `{ label: string; value: string }[]` | — | Rows in the expanded panel. |
| actions | `{ label: string; onClick?: () => void; primary?: boolean }[]` | — | Buttons in the expanded panel. |
| open / defaultOpen / onOpenChange | `boolean / (open: boolean) => void` | — | Controlled or initial expansion. |

### Referral

Invite-and-earn card with three steps, a copyable referral link and a segmented track of who has joined.

Install: `npx shadcn@latest add @geturui-pro/cards-referral`

```tsx
import { ReferralCard } from "@/components/ui/cards/referral";

export function Referral() {
  return <ReferralCard reward="$20" link="geturui.com/r/maya-k7f2" invitees={invitees} goal={5} onInvite={openInviteDialog} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| reward | `string` | "$20" | Reward per invite. |
| link | `string` | — | Referral link without the protocol. |
| invitees | `{ name: string; status: "joined" | "pending" }[]` | — | People invited so far. |
| goal / bonus | `number / string` | 5 / "3 months of Pro" | Joins needed and the bonus they unlock. |
| onCopy | `(link: string) => void` | — | Called after the link is copied. |
| onInvite | `() => void` | — | Shows an Invite by email button. |

### Memo folder

Folder whose front flap tips forward on hover or focus while three memos fan up out of it.

Install: `npx shadcn@latest add @geturui-pro/cards-memo-folder`

```tsx
import { MemoFolderCard } from "@/components/ui/cards/memo-folder";

export function Planning() {
  return <MemoFolderCard title="Q4 planning" subtitle="12 memos · edited 2h ago" memos={memos} onSelectMemo={(m) => openMemo(m.id)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title / subtitle | `string` | — | Text on the folder front. |
| memos | `{ id: string; title: string; meta?: string }[]` | — | Up to three memos that fan out. |
| tone | `"volt" | "ember" | "ink"` | "volt" | Folder colour. |
| open / onOpenChange | `boolean / (open: boolean) => void` | — | Controlled state; otherwise hover and focus open it. |
| onSelectMemo | `(memo: FolderMemo) => void` | — | Called when a memo is chosen. |

### Story reel

Auto-playing story card with segmented progress bars; tap the edges or use arrows to skip, hover or hold to pause.

Install: `npx shadcn@latest add @geturui-pro/cards-story-reel`

```tsx
import { StoryReelCard } from "@/components/ui/cards/story-reel";

export function WhatsNew() {
  return (
    <StoryReelCard
      duration={6000}
      stories={[
        { id: "1", kicker: "Changelog", title: "Charts got a dark-mode pass", tone: "volt" },
        { id: "2", kicker: "Tip", title: "Press ⌘K from any page", tone: "ember" },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| stories | `Story[]` | — | { id, kicker?, title, body?, tone?, action? } per slide. |
| duration | `number` | 5000 | Milliseconds per story. |
| loop | `boolean` | true | Restart after the last story. |
| autoPlay | `boolean` | true | Start playing on mount. |
| author | `{ name: string; monogram: string; time?: string }` | — | Header identity. |
| onIndexChange | `(index: number) => void` | — | Called when the story changes. |

### Creator profile

Monogram profile card with a drawn cover; Follow morphs to Following with a small burst and the follower count ticks.

Install: `npx shadcn@latest add @geturui-pro/cards-creator-profile`

```tsx
import { CreatorProfileCard } from "@/components/ui/cards/creator-profile";

export function Author() {
  return <CreatorProfileCard name="Maya Kerrigan" handle="@mayamakes" followers={2840} onFollowChange={(f) => follow(f)} onMessage={openDM} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| name / handle / role / bio / location | `string` | — | Profile text. |
| monogram | `string` | — | Avatar initials; derived from name when omitted. |
| verified | `boolean` | true | Shows a verified badge. |
| followers / following / posts | `number` | — | Stats row. |
| mutuals | `string[]` | — | Names for “Followed by …”. |
| isFollowing / defaultFollowing / onFollowChange | `boolean / (following: boolean) => void` | — | Controlled or initial follow state. |
| onMessage | `() => void` | — | Shows a message button. |

## Accessibility

- Every interactive part is a real button with state (aria-pressed, aria-expanded) and a visible focus ring.
- Animated numbers keep a static, readable value for assistive tech; the story card announces slides only when paused.
- Reduced motion swaps slides, fans and bursts for fades and still frames.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.