shadcn.io is not affiliated with official shadcn/ui
Flip Reveal Cards Pricing Block for Svelte
Three plan cards for a fitness coaching app that flip in 3D: a short front with the price, the call to action and three headline features, and a back with the full list and the plan's promise. A snap carousel on phones.
Installation
Overview
Reveal the full plan on demand with this flip reveal pricing section, shown here for Summit Coaching, a fitness coaching app. Three plan cards turn over in 3D when a visitor presses the Details button in a card's corner. The front is short enough to compare at a glance: the plan's name and tagline, its price (a Segment Group billing switch in the header row rolls each one with Sliding Number), the call to action and three headline features, with a line at its foot saying what's on the back. The back lists every feature, the plan's promise (a money-back guarantee, a coach swap) and repeats the call to action. Both faces share one grid cell, so a card is as tall as its longer face, under 420 px, and nothing scrolls inside it. The recommended Coach card carries a Best value outline Badge, a stronger ring and the one primary Shine Button; each card is framed by hairlines from Guides. Below the lg breakpoint the cards are a snap carousel that opens on Coach, with the next card peeking and one named dot per plan. Built with Badge, Button, Shine Button, Guides, Segment Group, Sliding Number, Lucide icons and Tailwind CSS. For SaaS and app pricing that wants a short first view with the detail one press away.
FAQ
How do I change what each face shows?
Edit the PLANS array at the top of the file. The front reads tagline, the monthly and annual prices, cta and the three highlights; the back reads detailsHeading, the full details list and promise, which the front's last line also quotes. Set popular: true on the plan that gets the Best value badge, the ring and the primary button, and START to its index so the phone carousel opens on it. The turn is the rotate-y-180 class on each card's inner wrapper: change its duration-700 or the ease-[cubic-bezier(…)] curve to make it slower, faster or less bouncy.
How do I send the calls to action to checkout?
Each face has the same call to action, and both are links: point href in the plan's data at your checkout with the plan and billing period in the address, and the top plan's at your application form. Each link is a ShineButton whose asChild renders an a element.
Can screen reader and keyboard users read both sides?
Yes, one side at a time. The face turned away is inert and hidden from assistive technology, so its links and buttons are out of the tab order and the two sides are never read mixed. The buttons are named for their plan ("Details of Coach", "Summary of Coach"), and pressing one moves focus to the button on the face that turned up. The billing switch is a radio group that arrow keys move through, and each price is read as "$39 per month". Under reduced motion the card turns without animating.
Why doesn't the back of a card scroll?
Both faces sit in the same grid cell, so the card takes the height of the taller one, and the three cards in a row share it. The copy is kept short enough that this stays under about 420 px; longer lists grow the card rather than hiding behind a scrollbar.
How do the flip cards work on a phone?
Below lg the cards sit in a horizontal scroller that snaps to each card, opens on the recommended plan and lets the next card peek in at the edge. The dots under it are buttons named "Show the Coach card" that scroll to a card, and the current one is marked. Each card flips on its own with a tap. The scroller works the same in a right-to-left page.
When should I use flip cards rather than cards that show everything?
Use flip cards when each plan has dense secondary content, such as a long feature list or a guarantee, that would crowd the first scan: the front stays short and comparable. Use always-visible cards when the lists are short and every line matters for the first decision, since a visitor who never flips never sees the back.