shadcn.io is not affiliated with official shadcn/ui
Industry Tabs Testimonials Block for Solid
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 Solid with Ark 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's asChild receives its props: spread them onto your router's link.
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.