Wallet

Features

• Hover a card to peek at it, and the cards behind rise with it.
• Click or tap a card to pull it out and show its content.
• Cards rise out of the pocket once, when the wallet scrolls into view.

Use cases

• Hero illustration on a pricing page, with one card per plan.
• Saved payment methods on an account page.
• Tickets, passes, and memberships in one place.

Installation

pnpm dlx shadcn@latest add @ncdai/wallet

Usage

import {
  Wallet,
  WalletCard,
  WalletCardContent,
  WalletCardDescription,
  WalletCardHeader,
  WalletCards,
  WalletCardTitle,
  WalletLabel,
  WalletPocket,
} from "@/components/wallet"

<Wallet>
  <WalletCards>
    <WalletCard className="bg-sky-600 text-white">
      <WalletCardHeader>
        <WalletCardTitle>Travel</WalletCardTitle>
        <WalletCardDescription>•••• 1945</WalletCardDescription>
      </WalletCardHeader>
      <WalletCardContent>
        <p>$6,120.50</p>
      </WalletCardContent>
    </WalletCard>
  </WalletCards>
 
  <WalletPocket>
    <WalletLabel>Wallet</WalletLabel>
  </WalletPocket>
</Wallet>

Cards must be direct children of WalletCards. Everything inside scales with the wallet's width.

Composition

Use the following composition to build a Wallet

Wallet
├── WalletCards
│   └── WalletCard
│       ├── WalletCardHeader
│       │   ├── WalletCardTitle
│       │   └── WalletCardDescription
│       └── WalletCardContent
└── WalletPocket
    └── WalletLabel

API reference

WalletCardTitle renders an h3. Use its render prop to change the heading level. WalletCard has data-active while it is pulled out.

Examples

Passes

Cards take any color and content, and the wallet makes room for more of them.

Accessibility

• Titles are buttons with aria-expanded.
• Escape puts the card back and returns focus to its title.
• Closed cards keep their content out of the tab order and away from screen readers.
• With prefers-reduced-motion, cards jump into place and do not peek.

Credits

• Vercel

License and usage

• Free to use and modify in both personal and commercial projects.
• Attribution is appreciated but not required.
• Released under the MIT License.