shadcn.io is not affiliated with official shadcn/ui
Testimonial Inline Pricing Block for Svelte
Three ad-manager plans as compact rows, each pairing its price, button and first four features with a quote from a customer on that plan, set beside it at reading size.
Installation
Overview
Let customers sell each plan in their own words with this testimonial inline pricing section, shown here for Placard Ads, an ad-management tool with Launch, Growth and Agency plans. The plans are three compact rows in one band between the page's solid side rails, ruled between rows, with + marks on its corners under the spine's top rule. On a laptop each row has three columns: the plan with its price, which rolls to its new amount with Sliding Number when the Segment Group switch in the header row changes the period, and a Shine Button; its first four features; and a quote from a customer on that plan, set at reading size with their Avatar initials, name, role and company. The other four features of each plan open from an "All 8 features" disclosure. Growth is tinted, carries a Most teams outline Badge and holds the only primary button. Below lg a row stacks as the plan, its features, then its quote. The quotes are two lines on a laptop, and the first button is within the first screen. Built with Avatar, Badge, Guides, Segment Group, Sliding Number, Shine Button and Lucide icons, with CSS transitions only. For SaaS pricing pages that need proof beside the price, agency tools and any plan a buyer wants to hear a peer endorse.
FAQ
How do I change the plans and their quotes?
Edit the PLANS array at the top of the file. Each plan has a name, a description, its monthly price, its annual price (the monthly amount when billed yearly, 20% off here), its features, featured for the tinted row with the primary button, an optional badge and the button's cta and href. Its testimonial has the quote, the author with their initials, role and company. SHOWN is how many features show before the disclosure. The quotes here are made up for the demo: use real ones, with permission.
How does the 'All 8 features' disclosure work?
It's a native details element, so it needs no script and works with Enter or Space, in every browser and on every base. Its summary reads "All 8 features" when closed and "Fewer features" when open, and the chevron turns with CSS (not at all under reduced motion). The first four features are always visible; opening it adds the rest below them.
How do I connect the buttons to checkout?
Each button is a real link to its plan's href: point it at your sign-up or checkout route with the plan and the period, for example /checkout?plan=growth&billing=annually, and send Agency to your sales form.
It's a ShineButton whose asChild renders the link, where your router's link can go instead.
Is this pricing section accessible?
Yes. The plans are a list, each plan's name is an h3 under the section's h2, and each quote is a figure with a blockquote and a caption naming who said it. The avatars are decorative and hidden from screen readers, since the name is in the caption. Each price keeps its amount in visually hidden text with "per month", each button names its plan ("Start 14-day trial, Growth plan"), and the billing switch is a radio group named "Billing period".
How does it fit a phone?
Below the lg breakpoint each row stacks: the plan with its price and button on one line, the first four features with the disclosure, then the quote, so the Growth button is within the first screen and a half. Nothing scrolls sideways, and the quote keeps its reading size.
When should I put testimonials inside the pricing section?
When buyers hesitate over which plan is right for them: a peer on the plan they're considering answers that better than a feature line. Keep each quote to one or two sentences about why that plan fit, and match it to the plan's real customers. If you have a few strong quotes rather than one per plan, a single testimonial strip under the plans is simpler.