shadcn.io is not affiliated with official shadcn/ui
Split Panel Pill Toggle Plan Card CTA Block for React
A split call to action for a product analytics tool: the pitch, a payment-method pill and the Shine Button at the start, one plan card in a hairline frame at the end, between solid rails.
Installation
Overview
Let visitors choose how they pay before they commit with this split plan card section, between the page's solid rails. At the start sit a quiet Badge, a headline, a short paragraph, a pill of three payment methods built from a Segment Group (Card, Invoice and Transfer) and the Shine Button, the block's only primary control, which takes the method's own label, from Start free trial to Request an invoice to Get bank details. Past a solid divider that meets the top rule, a Pro plan card for the fictional analytics tool Driftwell sits in a hairline frame with + marks on its corners: its price, a trial badge, four ticked features and the checkout summary, which changes with the method: what's due today, what comes after and what happens next, with every figure worked out from the monthly price. The block follows your theme. On a phone the copy, the pill and the button come first and the card sits under a ruled line. Built with Segment Group, Badge, Shine Button, Guides, Lucide icons and Tailwind CSS, with CSS transitions only. For SaaS plans sold by card and by invoice, B2B pricing pages and checkout previews.
FAQ
How do I change the payment methods and their terms?
Edit the METHODS array at the top of the file (the card's features are FEATURES). Each method has its label, how many months one payment covers, whether it's prepay (a year paid up front, with two months off, instead of a trial), the next step it says and the button's cta. The price comes from MONTHLY, the trial from TRIAL_DAYS and the prepaid year from PREPAID_MONTHS. Every amount in the summary, and the saving under it, is computed from those: change a number and the whole summary follows.
How do I connect the button to checkout?
The button is a real link, so point its href at your checkout and add the method to it, for example /checkout?plan=pro&pay=invoice, then let your server open a card session, create an invoice or send bank details. The button is a ShineButton with render set to an a element and nativeButton={false}.
How do keyboard and screen reader users use it?
The pill is a radio group named "Payment method": Tab reaches the chosen method and the arrow keys move and choose. Only the chosen summary is in the page for a screen reader; the other two are hidden. After a change, one polite message reads the new summary, for example "Paying by invoice. Due today: $0, free for 14 days. Then $87 every 3 months." Nothing is announced when the page loads.
Why doesn't the card jump when the summary changes?
The three summaries share one grid cell in the card. The tallest sets the cell's height, and the two that aren't chosen are hidden, so choosing a method only changes which summary shows. The button is full width, so its label can change length without moving anything.
Where does the saving for paying a year up front come from?
It's worked out, not typed: twelve months at the monthly price against PREPAID_MONTHS months, rounded down so the card never promises more than it gives. With $29 a month, ten months is $290 against $348, a saving of $58, shown as 16%. Set PREPAID_MONTHS to 12 and the note disappears with the saving.
How does it fit a phone?
Below the lg breakpoint the two halves stack, with the copy, the pill and the Shine Button first, so the button lands on the first screen, and the plan card under a ruled line. The pill fills the width, and the summary's rows wrap their values rather than overflow, down to a 320 px screen.
Related
- Pro
Compact Segmented Tab Control CTA
Slim bandsA slim upgrade band between solid rails, split by a divider: the headline with a rolling price at the start, a billing segment and a Shine Button on the end.
- Pro
Centered Light Tier Selector CTA
Pickers and togglesA centred sponsorship call to action for an open-source project: a band of five amount cells on shared hairlines, a Shine Button that names the chosen monthly amount, a Custom cell that opens a number field in the same space, and a closing band that counts the sponsors.
- Pro
Split Panel Pricing Card Visual CTA
Prices and offersA reverse split call to action for a team workspace: a membership card that tilts toward the pointer on a tinted panel flush to the rails, beside the Team plan's pitch and a Shine Button.
- Pro
Split Panel Tier Benefits CTA
Pickers and togglesA reverse split call to action for a partner program: a referral dial in a hairline frame at the start, beside the tiers as ruled rows and a Shine Button that names your tier.
- 123123Pro
Split Layout Pricing
Single planA product-led split: a mock of the app built from our own components with numbered callouts on it, matching a 'what you get' list, beside the one plan as a card in a card with a monthly and yearly switch.
- Pro
All Inclusive Pricing
Single planOne price over a wall of everything it includes: 36 features as ticked chips in six ruled groups, with the price and one call to action in the header row and nothing gated or extra to buy.