shadcn.io is not affiliated with official shadcn/ui
Tabbed Success Stories About Block for React
Three customer stories for an onboarding product, one tab each: a short quote and a three-node track of the customer's first 90 days, with one result on Day 1, Day 30 and Day 90.
Installation
Overview
A set of customer stories for React with Base UI, written for Stepwell, a fictional customer-onboarding product. A start-aligned header sits over a band of three tabs, one per customer, each with an initials mark, the customer's name and what it is. The open tab shows one short quote with its author, and under it a track of the customer's first 90 days: three nodes, Day 1, Day 30 and Day 90, each with a single result as a large figure and one sentence. The track is a row of three cells ruled by hairlines from md and a stack below it. Every customer's panel is stacked unseen under the open one, so the block keeps its height when you pick another tab. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Tabs, Avatar and Guides, with CSS for the entrance and your theme's tokens for every colour. For about pages that want to show what the product did for real customers without turning into a wall of testimonials. The customers, quotes and figures are example data.
FAQ
How do I change the customers and their results?
The customers are STORIES at the top of the file: a name, an initials mark, one line about the customer, a quote with its author and role, and three results, each a short figure and a sentence. The three results are always read as Day 1, Day 30 and Day 90; their labels and node styles are DAYS. Keep the quote to a sentence: the track is the story.
How do the tabs behave with a keyboard?
They are the library's tabs: one tab stop for the list, arrow keys move between customers, and the open customer's panel follows. The tabs are named "Customer", and the panel is a labelled region you can reach with Tab. Every panel is the same height, so nothing below the block moves when you switch. Base UI selects a tab as it takes focus.
Why is there a hidden copy of every panel?
Panels have different amounts of text. An unseen copy of all of them sits in the same grid cell as the live one, hidden from assistive technology and the keyboard, so the cell is always as tall as the tallest panel and the page never jumps. The copy is inert, so it can't take focus.
Isn't this a testimonials block?
No: the quote is one line and secondary. The block is about what happened to each customer in the first 90 days, told in three results, and each story is attached to a named customer on a tab, not a wall of quotes with stars. For quote-led blocks, see the testimonials category.
How does it fit on a phone?
The tabs scroll sideways in their band when they don't fit; the mark and the name stay together in each. The track stacks into three rows divided by hairlines, each with its node, figure and sentence. Nothing scrolls the page sideways at 320 pixels, and the figures are isolated so units keep their order in a right-to-left layout.
Related
- Pro
Snap Row Case Study Cards
CustomersA scroll-snap row of five case-study covers, each with a drawn wordmark, a giant result figure, two tags and a link, and a wider first card.
- Pro
Mention Tally Customer Love
CustomersWhat customers mention most for a review-monitoring tool: six themes ranked with a bar to scale and a count, each opening two word-for-word snippets, with the tally derived from the typed reviews.
- Pro
Client Results Table About
CustomersA framed table across five shop clients for an A/B testing tool: what was tested, before and after, and the improvement computed as a chip with an arrow and a sign, with a ringed row on hover and focus.
- Pro
Vertical Steps Journey
Principles and processA customer journey section for a CRM: the first 90 days as a vertical stepper with the catalog Steps, each stage with its timing, its hands-on time and its key action, and a line that says which stage you are in.
- Pro
Hover Card Customer Logos
CustomersTwelve drawn customer wordmarks for a parcel-logistics company in cells that share their hairlines, each opening a hover card with the shop's trade, how long it has been a customer and what it sends.
- Pro
Horizontal Track Timeline About
TimelinesA company timeline drawn as one horizontal track: six milestones in relative time, each a cell of a ruled band with a dot on the rule, turning into a vertical rail on phones.