Card Swap
A fanned stack of vivid art cards; click, swipe or press an arrow and the front card tucks behind.
card-swap.tsxcard-swap.css
Checking access…
Overview
Cards fan out with a configurable spread. Advancing sends the front card off with a flick and the rest spring forward one place.
The demo art is generated from three colours per card, so it ships with no images; pass your own backgrounds for covers or photos.
When to use
- Picking a theme, wallpaper, plan or deck where each option is visual.
- Onboarding moments that show a few highlights one at a time.
When not to use
- Lists people need to compare side by side.
- More than about eight items.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/card-swap.json$
npx shadcn@latest add https://sundaeui.dev/r/card-swap.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/card-swap.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/card-swap.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy card-swap.tsx and card-swap.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { CardSwap } from '@/components/sundae/card-swap'
<CardSwap
label="Wallpapers"
cards={[
{ title: 'Chalk', colors: ['#e9e9e7', '#111111', '#8a8a8a'] },
{ title: 'Graphite', colors: ['#1d1d1d', '#e8e8e8', '#5c5c5c'] },
]}
/>Props
| Prop | Type | Default |
|---|---|---|
cards*Title and three art colours per card. | SwapCard[] | — |
spreadOffset between stacked cards, px. | number | 16 |
labelAccessible name of the carousel. | string | 'Collection' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- A focusable group with aria-roledescription="carousel"; the current card is announced through a polite live region.
- Cards behind the front one are aria-hidden.
- Reduced motion replaces the flick with a fade.
Customization
- Every colour is a CSS custom property on the root class; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- → / ↓
- Next card
- ← / ↑
- Previous card
FAQ
- Is Card Swap free?
- Card Swap is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Card Swap?
- Run npx shadcn@latest add https://sundaeui.dev/r/card-swap.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Card Swap support keyboard and screen readers?
- A focusable group with aria-roledescription="carousel"; the current card is announced through a polite live region. Cards behind the front one are aria-hidden.
- Does Card Swap respect reduced motion?
- Reduced motion replaces the flick with a fade.
More like this
All 3d →- Pro
Holo Ticket
3D · Futuristic Before / After
3D · Refined- Pro
Photo Adjust
3D · Refined Taffy Tabs
Navigation · PlayfulJelly Switch
Forms · PlayfulMargin Quote
Sections · Editorial