shadcn.io is not affiliated with official shadcn/ui
Stacked Cards Pricing Block for React
A fanned deck of plan cards for a flashcard app: the chosen plan's card in front with its price, button and features, the other two peeking out behind, brought forward by a tab list.
Installation
Overview
Make the plans feel like a hand of cards with this stacked cards pricing section, shown here for Deckhand Flashcards, a study app with Free, Plus and Tutor plans. The three plans are cards stacked and offset like a fanned deck inside one band between the page's solid side rails, with + marks on its corners under the spine's top rule: the chosen plan's card is in front with its name, price, Shine Button call to action and four features, and the other two peek out behind it, tilted, showing only their names and prices. A Tabs list in the header row, named Plan, chooses the card: pick another plan and its card comes to the front while the other two fan out behind it, with CSS transitions that reduced motion removes. Plus opens first, carries a Best value outline Badge and holds the only primary button. The header row is one headline and one sentence, and the deck is about 450 px tall, so the front card's button is in the first screen on a laptop and on a phone. Built with Badge, Guides, Shine Button, Tabs and Lucide icons. For consumer apps, three-plan pages that want one card in focus and any pricing where choosing is a small moment of play.
FAQ
How do I change the plans and their cards?
Edit the PLANS array at the top of the file. Each plan has an id, a name, a tagline, a monthly price in dollars (0 shows "Free"), its features (four fit the deck's height), the call to action's cta and href, featured for the one with the primary button and an optional badge. The tabs and the cards behind are built from the same array, so a new plan adds a tab and a card. Keep three: the fan has room for two cards behind the front one.
How do I choose which card is in front first?
Change defaultValue="plus" on Tabs to another plan's id.
How do the tabs and the cards behind work with a keyboard and a screen reader?
The tab list is a real tablist named "Plan", and the front card is the selected tab's panel, so a screen reader announces the selected plan's tab and then reads its card. Arrow keys move between the tabs. The two cards behind are only a picture: they're hidden from assistive technology and inert, out of the tab order, and their names and prices are available from the tabs. The card's button names its plan, as in "Start 7-day trial, Plus plan".
How is the fan animated?
Each plan's panel holds its own deck. When a panel appears, the front card slides up and settles, and the two cards behind fan out from behind it into their tilted, offset places; these are CSS starting: styles and transitions on translate and rotate, so there is no script and no motion library. With reduced motion the deck simply appears in place.
How do I connect the button to checkout?
The front card's call to action is a real link to its plan's href: point it at your sign-up or checkout route with the plan in the URL, for example /signup?plan=plus.
It's a ShineButton with render set to an a element and nativeButton={false}.
When is a deck better than three cards side by side?
When the plans build on each other and you want a buyer to look at one at a time: a deck gives each plan the whole card, keeps the page short on a phone and still shows that two others exist. Side by side cards or a comparison table suit buyers who compare every feature line by line.
Related
- Pro
Slide Deck Carousel Pricing
Plan cardsEvery plan of a presentation tool on a slide of its own, in a carousel with a counter and previous and next buttons in the header row, and a filmstrip of one thumbnail per plan as its navigation.
- Pro
Vertical Tabs Panels Pricing
Plan findersPlans as vertical tabs: a rail of tiers with price previews, and a detail panel per plan that opens with its price and call to action, then three highlights and every feature. Three tabs across on a phone.
- Pro
Accordion Plans Pricing
Plan rowsThree plan rows for an email API, each its own band with its price and call to action in view, opening in place to list its features, with a monthly and annual switch in the header row.
- Pro
Compact Rows Pricing
Plan rowsThe densest price list: a type foundry's six licenses set like a menu in mono, each row a name, what it covers and dot leaders running out to its price, with a buy button.
- Pro
Three Columns Pricing
Plan cardsThe canonical three-column pricing section for a team knowledge base: Personal, Team and Company cells under a monthly and yearly switch, each outlined by hairlines that overshoot its corners, the recommended plan raised, one plan at a time on phones.
- Pro
Featured Plan Pricing
Single planOne plan in the spotlight: an oversized card under a monochrome cone of light with the price as the largest type on the page, a monthly and yearly switch, and a short pitch beside it.