shadcn.io is not affiliated with official shadcn/ui
Use Case Switch Testimonials Block for Radix UI
A two-way segmented switch between startups and enterprise in the header row that swaps a band of three cells: the usual outcome as a big figure with a Shine Button, and two customer quotes.
Installation
Overview
Customer proof that answers "is this for someone like me?" for React with Radix UI. A compact header on the page's drafting lines holds the heading and sentence at the start and a pill-shaped switch with two choices, For startups and For enterprise, at the end. Below it a band of three cells shares its hairlines: the usual outcome as a large figure ("Live in 3 days" or "Rolled out to 14 regions") with a Shine Button that fits that kind of team ("Start free" or "Talk to sales"), and two quotes from that kind of team, each with initials, name, role and company. The product is Kitewire, a made-up customer-messaging tool. Both panels share one grid cell, so the section never changes height, and the switch is a toggle rather than tabs: it picks a version of the same proof. On a phone the three cells stack and the outcome comes first. It's built from Segment Group, Avatar, Shine Button and Guides, with CSS transitions and your theme's tokens only. For landing pages that sell to both ends of the market.
FAQ
How do I change the choices, outcomes and quotes?
Edit USE_CASES at the top of the file: each choice has a label, an icon, the outcome's lead, figure and detail, the button's action label, and its people with their quote, name, role, company and initials. A choice is added to the switch with each entry. The outcome figures are typed text: use numbers your customers really see.
Why a switch and not tabs?
There is no navigation here, only two versions of one answer, so the control is a segmented switch, announced as a group of two options with one selected. Tabs would promise separate panels to move between. The left and right arrow keys move between the options and select the one you land on.
What does a screen reader hear when I switch?
The choice you make is announced as selected, and a hidden polite status line then says which quotes are showing ("Showing quotes for enterprise"). The panel that is not showing is hidden from screen readers and can't take focus, so only one set of quotes is ever read.
Why doesn't the page jump when I switch?
Both panels live in the same grid cell, one over the other, so the cell is always as tall as the taller panel. The one that isn't selected is invisible, not removed.
What happens with reduced motion?
The panels swap without a fade, and the section's entrance is skipped.
Does it work right to left?
Yes. The switch and the band's cells mirror, and the outcome's figure is kept whole so "14 regions" doesn't reorder.
How do I point the button at my page?
Change the href of the button in the outcome cell (the action of each choice). Say where it goes in its label, such as "Start free". It's a Shine Button, the one primary control in the block, and a diagonal band of light crosses it once on hover or focus (it fades in instead with reduced motion).
The link renders its a through asChild, so the button's styles land on the link.