Card Stack

import { Badge } from "@/components/ui/badge"
import { BankCard } from "@/components/ui/bank-card"
import { CardStack } from "@/components/ui/card-stack"

The CardStack component piles up to three BankCards: the last one lies on top in full, and the others peek out above it, each a little narrower. Use it on a cards page to show that there is more than one card, or to offer a new one on the card behind. To pick between cards, use a list or a carousel instead.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @dots/card-stack
Copy

Usage#

Copyimport { BankCard } from "@/components/ui/bank-card"
import { CardStack } from "@/components/ui/card-stack"

Copy<CardStack offer={<Badge>Get a virtual card</Badge>}>
  <BankCard skin="lime" />
  <BankCard skin="frost" />
  <BankCard skin="onyx" mark={<IssuerLogo />} network="visa" last4="4242" />
</CardStack>

Composition#

The last child is the top card. Earlier children peek out above it, the first one farthest back.

CopyCardStack
├── BankCard   (farthest)
├── BankCard
└── BankCard   (top)

Features#

• Children-based: pass any BankCards, in back-to-front order
• Up to three cards; extra children are dropped from the back
• Cards behind the top one show their real plastic and artwork on the strip
• An offer slot on the farthest edge for a badge or a short note
• One width for the whole pile; every card follows it

Two cards#

With two children the pile is shorter: one strip above the top card.

import { BankCard } from "@/components/ui/bank-card"
import { CardStack } from "@/components/ui/card-stack"

Width#

The stack is 340px wide and never wider than its parent. Set a width class, such as w-[280px], to change it. The cards fill the stack, so a width on a card inside it has no effect.

Offer#

Pass any node to offer, such as a Badge. It sits at the top end of the farthest card. To make the offer actionable, wrap the stack in a link or a button and name that control, for example "Get a virtual card".

Accessibility#

CardStack is a <div> with no role of its own.

• Only the top card is exposed to assistive tech. The cards behind it are aria-hidden, since they show only a strip of plastic.
• The offer is read as normal content. Keep it short and specific.
• If the cards behind stand for real cards, say so in nearby text, such as "3 cards", because they are not read out.

API Reference#

CardStack#

Accepts all <div> props.