shadcn.io is not affiliated with official shadcn/ui
Slide Deck Carousel Pricing Block for React
Every 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.
Installation
Overview
Give each plan the stage with this slide deck pricing section, shown here for Lectern Slides, a presentation tool. A Carousel shows one plan per slide and opens on the recommended Pro plan. The header row holds a "Slide 2 / 3" counter and the previous and next buttons beside the heading, and the deck is drawn as a figure: a solid hairline frame with + marks on its corners from Guides. Each slide pairs the plan's name, tagline, price and a Shine Button call to action with its features as ruled rows, and ends in a footer strip with a page number like a real slide. The recommended slide carries an outline Best value Badge, a stronger ring and the section's one primary button. Under the deck a filmstrip of thumbnails, one per plan with its name and price, jumps to any slide; the current one has the stronger outline. Built with Carousel, Badge, Shine Button, Guides and Lucide icons, with CSS transitions only. For pricing pages with a few rich plans, product tours and mobile-first layouts.
FAQ
How do I change the plans or the slide the deck opens on?
Edit the PLANS array: each plan has a name, a tagline, a monthly per-user price (0 shows "Free"), a priceNote, features, a cta and an href, and badge marks the recommended plan. START is the index of the slide the deck opens on: keep it on the plan you recommend. The counter, the page numbers and the filmstrip all follow the length of PLANS.
How does the carousel work on each library?
opts.startIndex opens it on the recommended slide, and setApi hands the block Embla's API, which keeps the counter and the thumbnails in step through its select event and moves to a slide with scrollTo. The direction comes from Base UI's own provider, so the deck slides the right way on a right-to-left page.Can visitors browse the deck with a keyboard?
Yes. The previous and next buttons are disabled at either end of the deck, and every thumbnail is a button named after its plan and price, such as "Go to Pro, $10", with the current one marked. With focus anywhere in the deck, the left and right arrow keys move between slides. The slides that are out of view are inert, so Tab never lands on a hidden call to action.
What does a screen reader announce?
The deck is a region named "Pricing plans" with the carousel role description, and each slide is a group named by its plan and position, such as "Pro, 2 of 3". When the slide changes, the new slide is announced politely through the counter in the header row, only after a visitor acts. The "/user/mo" beside a price is read as "per user per month".
What changes when a visitor prefers reduced motion?
The header and the deck appear without their entrance, and the current thumbnail's outline changes at once. Moving between slides still works the same way; nothing in the deck moves on its own, so there's no autoplay to pause.
When is a carousel better than a plan grid?
When each plan has enough to say to fill a slide, and on small screens, where a grid becomes a long stack anyway. A carousel hides the plans it isn't showing, so visitors who want to compare prices side by side are better served by a grid or a comparison table; opening on the recommended plan keeps the most important slide from being the one nobody reaches.
Related
- 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.
- Pro
Stacked Cards Pricing
Plan cardsA 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.
- 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
Billing Toggle Pricing
Billing switchesThree plan cards under a monthly and yearly switch that wears its saving in the header row, with prices that roll to their new amount and each plan a card in a card.
- Pro
Support Tiers Pricing
Plan rowsThree support tiers for managed Postgres ranked by how fast they answer: each row leads with its response time and a bar as long as the answer is quick, then its price and button.
- Pro
Flip Reveal Cards Pricing
Plan cardsThree 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.