Pro
Card dealer
A card table with a face-down deck, a fanned hand and a discard pile. Dealt cards arc off the deck and turn over in flight, played cards arc to the pile, sorting makes the hand's cards hop over each other into order, and collecting sweeps everything back.
pnpm dlx shadcn@latest add @caliper/card-dealerWhen to use
Use it for
- Card games, quizzes and flash-card study apps.
- Playful onboarding or rewards where cards stand for choices.
Skip it when
- Ordinary content cards; this is a table of playing cards.
- Hands of more than about ten cards on a phone; the fan gets too tight to tap.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Rest, then fly
- Every card's resting place is a transform; a move animates from where it was to where it rests, through a lifted midpoint, so a card always lands exactly in place.
- Turn at the top
- A card that changes face passes edge-on at the top of its arc, where the swap is hidden by the turn.
Usage
- Buttons for the moves
- The top of the deck deals, each hand card plays itself, and Deal, Sort hand and Collect are buttons; every move is announced.
Installation
pnpm dlx shadcn@latest add @caliper/card-dealer
Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source. It is built from CardDealer and cardName.
import { CardDealer, cardName } from "@/components/ui/card-dealer"
The worked example comes with Pro
The 27-line example behind the preview opens here, ready to copy.
- 602 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
CardDealer
component
Also accepts the native props of its root element and a ref.
cardName
component
Accessibility
It is built on native elements and keeps aria-hidden, aria-label and aria-live in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Card stackA pile of cards you flick through one by one.
- Card fanA hand of cards to choose from. They fan out from a point below; the card under the pointer rises and its neighbours lean away; the chosen card is drawn up out of the hand, straight and on top, and the others close ranks.
- Drop pileThings that fall in and pile up like real objects: letters for a headline, digits for a count. They bounce off the walls and each other, settle, and can be picked up and thrown. It runs only on screen and sleeps once still.