shadcn.io is not affiliated with official shadcn/ui
Industry Tabs Testimonials Block for React
Icon 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.
Installation
Overview
Customer proof for a product that serves more than one kind of buyer, for React with Base UI. A compact header puts the heading and a sentence beside a row of four underline tabs with an icon each (SaaS, Retail, Healthcare and Finance); on a phone the tabs sit under the sentence, each icon above its label. Each tab opens a panel of three cells whose corners overshoot the lines: the sector's median rollout time as a big figure, then two quote cells with the speaker's initials, name, role and company. A ruled band closes the block with a Shine Button and a ghost link. The panels sit in one grid cell, so the block keeps the tallest sector's height and switching tabs never moves the band below, and each panel fades and lifts in with CSS. It's built from Tabs, Avatar, Button and Shine Button, with your theme's tokens only. For landing pages with several verticals, where each visitor should find a quote from someone in their world.
FAQ
How do I change the industries and their quotes?
Edit INDUSTRIES at the top of the file: each sector has an id, a label, an icon from lucide-react, a rolloutDays number and a list of people with their quote, name, role, company and initials. Tabs are added or removed with the list, but the panel is built for a figure and two quotes (a column of 15rem and two equal ones), so keep two people per sector. A fourth tab fits a phone's width; a fifth needs the tab grid changed.
Where does the rollout time come from?
It's typed in the data, not calculated: write the number of days your own customers' onboarding actually shows for that sector, or delete the cell if you don't track one. The sample figures are placeholders, as are the people and companies, which are all invented.
How do the tabs work with a keyboard and a screen reader?
They are real tabs with real panels. The left and right arrow keys move between them and open the one you land on, Home and End jump to the first and last, and Tab moves on into the open panel. A screen reader announces the tab list as "Industry" and each tab by its label; the icons are decorative. Each quote is a figure with a blockquote and the speaker as its figcaption.
Why doesn't the page jump when I switch tabs?
An unseen copy of every sector's panel sits in the same grid cell as the open one, so the cell is always as tall as the tallest sector. The copies are hidden from screen readers and can't take focus.
How does it fit a phone?
The four tabs share the width with each icon above its label, so none scrolls off the edge. The panel stacks its three cells: the rollout figure first, as a short row with its icon, then the two quotes. From lg the cells sit side by side, and the tabs move into the header row.
Where do the buttons go?
Both are links (href="#"): point the first at your sign-up and the second at your customer stories. The Shine Button is the only primary control; the second is a ghost button.
Each button renders the link it's given with render, with nativeButton={false}.
With reduced motion the entrances and the tab underline's slide are skipped and everything simply appears; in a right-to-left page the tabs run from the right and the speaker's name and role sit at the start of the line.
Related
- 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
Use Case Switch Testimonials
Filter and searchA 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.
- 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
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
Tabbed Feature Showcase Hero
Interactive demosA split hero for a code assistant: a headline, a Shine Button and an outline action at the start, and at the end a framed card with underline tabs for features, integrations and pricing.
- 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.