caliper uidocs
DemoSign inGet Pro

Wallet card

Block

A payment card with brand, last four digits and actions.

Installs components/ui/wallet-card.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/wallet-card.json

Everyday account

Available balance

$4,820.50

•••• 6089

Recent activity

  • Northwind invoiceToday+$1,280.00, received
  • Studio rentYesterday−$950.00, paid out
  • Cloud hostingMon−$62.40, paid out

When to use #

Use it for

  • Showing a saved payment method.

Skip it when

  • Collecting a new card; use the checkout.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/wallet-card.json

Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { useState } from "react"
import { WalletCard } from "@/components/ui/wallet-card"

export function WalletCardDemo() {
  const [, setLog] = useState("");
  return (
    <WalletCard
              name="Everyday account"
              balance={4820.5}
              accountNumber="4821 9034 2217 6089"
              actions={[
                { id: "send", label: "Send", onClick: () => setLog("Send opened") },
                { id: "receive", label: "Receive", onClick: () => setLog("Receive opened") },
                { id: "top", label: "Top up", onClick: () => setLog("Top up opened") },
              ]}
              transactions={[
                { id: "t1", label: "Northwind invoice", amount: 1280, date: "Today" },
                { id: "t2", label: "Studio rent", amount: -950, date: "Yesterday" },
                { id: "t3", label: "Cloud hosting", amount: -62.4, date: "Mon" },
              ]}
            />
  );
}

API reference #

WalletCard

component
PropTypeDefaultDescription
name *string—
balance *number—
currencystring"USD"
accountNumber *string—Full number; only the last four digits are shown unless the person reveals it.
actions *readonly WalletAction[]—
transactionsreadonly WalletTransaction[][]
classNamestring—

Accessibility #

It is built on native elements and keeps aria-hidden, aria-label and aria-pressed in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.