shadcn.io is not affiliated with official shadcn/ui
Expandable Profile Testimonials Block for Svelte
Three customer cells that expand in place into a profile, each a hairline box with a + mark, under a compact header with a Shine Button: a two-line quote when closed, the whole quote plus industry, team size, plan and time as a customer when open.
Installation
Overview
A testimonials section that answers "who is this person, really?" without sending visitors anywhere, for Svelte with Ark UI. A compact header names the section and carries one Shine Button, "Browse all customer profiles", at its end on wide screens. Under it, three cells sit side by side, each a hairline box that runs a little past its corners with a + mark, showing the company, the first two lines of a quote and the speaker. A "View profile" button opens the cell downward: the quote runs in full and a short profile appears beneath it, listing industry, team size, plan and how long they have been a customer of Ostler, a fictional client-operations tool. Each cell opens on its own, and the first one starts open so the poster shows what a profile looks like. On a phone the cells stack with the first open. It's built from Collapsible, Data List, Avatar, Guides, Button and Shine Button, with CSS transitions only and your theme's tokens. For pricing and landing pages where buyers want to find a company like theirs.
FAQ
How do I change the customers and their profile facts?
Edit the CUSTOMERS array at the top of the file. Each entry holds the quote, the speaker and the four profile facts: industry, teamSize, plan and customerFor. The facts are plain strings, so write them as you would say them ("120 people", "14 months") and keep them true; they are the part visitors will compare themselves against.
Do the cells open one at a time?
No, each cell keeps its own open state, so a visitor can open all three to compare. Opening a cell makes only that cell taller, and the cells sit at the top of their grid so the others don't stretch. To make them behave like an accordion, lift the state into the section and keep one open id.
How does the button work with a keyboard and a screen reader?
It's a real button that announces whether the cell is open, and its name includes the speaker ("View profile, Ines Duarte") so three identical labels are told apart. The quote is a figure with a blockquote and a caption. The profile is a description list, so each label is read with its value.
Is the quote cut off for screen readers when the cell is closed?
No. The full quote is always in the page; the two-line preview is only a visual clamp, which the open state lifts. Nobody reads a shorter or a different text than a sighted visitor.
Does it work in right-to-left languages?
Yes. The button, the labels and the avatar row use logical sides, the chevron turns the same way in either direction, and quotes and values with units sit in a bdi so they keep their order. The + marks sit on the start corner of each cell.