shadcn.io is not affiliated with official shadcn/ui
Use Case Switch Testimonials Block for React
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 Base 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).
On Base UI, the link renders through render={<a href="…" />} with nativeButton={false}.
Related
- Pro
Industry Tabs Testimonials
Filter and searchIcon tabs in the header row that switch customer quotes by industry: four sectors, each a panel of three cells (the typical rollout time and two quotes) above a band with a Shine Button.
- Pro
Role Tabs Testimonials
Logos and facesVertical tabs of four personas in a closing band: a list of roles at the start, a divider, and the open role's quote and three things it looks for, with a Shine Button in the header.
- Pro
Filterable Testimonials
Filter and searchRole chips with live counts filter a wall of eight customer quotes, with a status line, a clear button and an empty state. A hairline band holds the controls and the cells' lines overshoot their corners.
- Pro
Testimonials Auto-Advancing Tabs
Carousels and decksThree tabs of customer quotes, Product, Support and Value, in two bands between the rails: the active tab's underline fills over eight seconds and then the next quote opens in a closing band, with a pause button in the header, a hold on hover and focus, and no autoplay under reduced motion.
- Pro
A centered single-plan hero with a monthly and annual switch under the headline, then one band split by a hairline: the price beside a Shine Button, and six included features.
- Pro
Audience Tabs Pricing
Plan cardsThree large audience tiles in the header row (freelancer, studio, agency) that open their own plans: cells that share hairlines on desktop, one plan at a time behind a segment group on a phone.