Pro

Card fan

A 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.

Pro

pnpm dlx shadcn@latest add @caliper/card-fan

Choose your card

Point at the hand, or use the arrow keys.

Stone card design

Installs components/ui/card-fan.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

Choosing a card design, a theme, a plan tier or an avatar.
Three to seven visual options where the choice should feel tactile.

Skip it when

Options people need to compare in detail side by side; use radio cards.
More than about seven cards.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

A radio group: Arrow keys move through the hand and choose, Home and End jump to the ends, and only the chosen card is in the Tab order.

Styling

One pivot: Every card turns on the same point below the hand and rises along its own axis, so the fan reads as held, not as tiles.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/card-fan

Adds its 2 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.

example.tsx

import { CardFan } from "@/components/ui/card-fan"

The worked example comes with Pro

The 48-line example behind the preview opens here, ready to copy.

576 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

Checking your licence…

API reference

CardFan

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

cards *readonly FanCard[]—

label *string—Names the choice, e.g. "Card design".

valuestring—

defaultValuestring—

onValueChange((id: string) => void)—

It exposes radiogroup and radio semantics, with aria-label and aria-checked kept 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.