Cards

6 variantsPro

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

cardbalancefintechreferralinvitefolderstoryprofilefollowexpandable

Account balance

account-balance.tsx

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

$npx shadcn@latest add @geturui-pro/cards-account-balance

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

status-row.tsx

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

$npx shadcn@latest add @geturui-pro/cards-status-row

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

referral.tsx

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

$npx shadcn@latest add @geturui-pro/cards-referral

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

memo-folder.tsx

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

$npx shadcn@latest add @geturui-pro/cards-memo-folder

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

story-reel.tsx

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

$npx shadcn@latest add @geturui-pro/cards-story-reel

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

creator-profile.tsx

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

$npx shadcn@latest add @geturui-pro/cards-creator-profile

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.

Install the whole set

Installs every cards variant at once. Each section above has its own command for a single variant.

Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.

$npx shadcn@latest add @geturui-pro/cards

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.

Avatar Tilt Card