shadcn.io is not affiliated with official shadcn/ui
Pricing Plans Carousel Block for React
Four plans on a hairline track, two at a time, with a Monthly or Yearly switch that reprices every plan from integer cents and a table that compares the pair in view line by line, the differing values in bold.
Installation
Overview
Let people slide between plans and see what differs, with this pricing plans carousel for React with Base UI. Tiermoor, a scheduling service, offers four plans (Sprout, Grove, Orchard and Forest) on one ruled track. A Segment Group in the toolbar band switches Billing between Monthly and Yearly and every price is worked out from integer cents (yearly bills ten months of twelve, so the monthly figure, the yearly total and the saving all come from one number). Each hairline cell has the name, who it is for, the price a month, how it is billed and a Choose button; the recommended plan's is the one Shine Button. Under the track a table compares the plans in view: six features, a row each, with the values that differ in bold, and sliding the track changes the pair. Two plans show from the medium breakpoint, one with the next peeking on a phone, where the table shows that plan alone. A foot holds the counter, a dot for each step and Previous and Next. It's built from Carousel, Segment Group, Shine Button, Button and Guides. The plans and prices are made up.
FAQ
How do I change the plans and prices?
Edit PLANS and FEATURES. Each plan has a monthly price in cents, a name, a tagline, a recommended flag and one value for each feature, in the order of FEATURES. The yearly price is monthly × PAID_MONTHS (ten) and the monthly figure under yearly billing is that total divided by twelve and rounded to the cent. Change PAID_MONTHS to change the discount; the saving line and the toolbar sentence follow.
How does the comparison work?
It reads the plans in view. With two plans in view it shows two columns and sets the values that differ in bold; a row where both plans say the same thing stays plain. With one in view, on a phone, it lists that plan's values alone. The table keeps six rows, so the panel never changes height when you slide.
Which plan gets the Shine Button?
Only the recommended plan, so at most one Shine Button is ever on screen. The other plans use an outline Button. Choosing a plan presses its button and the foot says "Grove chosen in this demo".
How does it work with a keyboard?
Tab reaches the Billing switch, each visible Choose button, Previous, the dots and Next. With focus inside the panel, the arrow keys move the track by one plan (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled. Plans that are out of view are hidden from the tab order and from screen readers.
The step is Embla's slidesToScroll.