shadcn.io is not affiliated with official shadcn/ui
Fanned Card Deck Features Block for Radix UI
Five playbook cards stacked and pivoting from their bottom edge that spread on an arc on hover, on focus inside the deck or when a Fan out toggle is pressed, each with a small drawing of its play.
Installation
Overview
A fanned card deck features section for React with Radix UI. Five cards of a sales-playbook tool sit stacked with a slight offset and pivot from their bottom edge. Hovering the deck, moving focus into it or pressing the "Fan out the deck" toggle spreads them on an arc, so each card's title and drawing is in view (a call-script line, two question chips, an objection and its answer, a demo timer, a booked slot). A card lifts under the pointer so its sentence can be read, and a hairline floor sits under the hand. It's built from Toggle and Guides, with CSS rotation and translation driven by one custom property and your theme's tokens for every colour. For playbooks, onboarding steps and any set of five things that belong in one hand.
FAQ
How does the fan work?
The deck sets a custom property, --f, to 0 at rest and 1 when it is hovered, has focus inside it or has the toggle pressed. Each card reads its place in the hand from --k (from minus two to two) and sets its rotate and translate from both, so one CSS transition spreads them all. There is no script on the cards themselves.
How do I change the cards?
Edit PLAYS (a title and a sentence each) and the five drawings above Card. The pose maths assumes five cards, with the middle one at zero; for another count change at() so the middle card is still zero, and the width of the stage.
How does it work without a mouse?
The Fan out toggle is a real button with a pressed state, so a keyboard or a touch screen can open the fan and keep it open. Focus on the toggle also spreads the deck while it has focus. On a touch device, where there is no hover, the toggle is the way in.
What does a screen reader hear?
Every card is in the reading order as a heading with its sentence, whether the deck is fanned or not; the drawings are hidden from assistive technology. Stacked cards overlap on screen only.