shadcn.io is not affiliated with official shadcn/ui
Tabbed Success Stories About Block for Ark UI
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 Ark 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.
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.