shadcn.io is not affiliated with official shadcn/ui
One-Liner Pills Testimonials Block for Svelte
One-line customer quotes in two ruled bands: the best line at display size, then a cloud of fourteen pill buttons that open a small card with who said it, under a compact header with a Shine Button.
Installation
Overview
A cloud of one-sentence customer quotes about Marrow UI, a component kit. A compact header names the idea and carries a Shine Button to the longer stories. The first band sets the best line at display size with its author, and the second holds the other fourteen as pills of every length, wrapped and centred, each with the author's initials and a single line of praise. The quote is the pill; the author is one tap away. Activating a pill opens a small card with the person's name, role and company, and it closes on Escape or a tap elsewhere, returning focus to the pill. Nothing waits on hover, so it works the same on a phone, with a keyboard and with a mouse. On a phone the cloud shows six pills and a "Show 8 more lines" button opens the rest, so the block doesn't turn into a long scroll. For pages that want a lot of proof in a small space.
FAQ
How does a pill open its card?
Each pill is a real button wrapped in a toggle tooltip, which is a small popover. It opens on click, tap, Enter or Space, and closes on Escape or a tap outside. Focus moves into the card when it opens and goes back to the pill when it closes. Unlike a hover tooltip, it is never reachable only with a mouse. Open one pill and another closes it.
What do screen readers hear?
The best line is a figure with a blockquote and a figcaption. Each pill is a button named with the quote and the words show who said it, which says whether it is expanded. The card that opens is a small dialog named for the person and holds their role and company. The initials avatars are hidden since the name is in the card. The pills sit in a list named One-line customer quotes.
How do I use my own quotes?
Edit BEST for the line at display size and LINES for the pills: each entry has a quote, the author's name and initials, and their role and company. Keep each quote to a line or two; a pill wraps rather than cutting its text, so even a long one stays readable down to 320 px. The fifteen people and companies here are made up, and the heading counts them, so change it if you add or remove lines.
How does the cloud behave on a phone?
The pills wrap to as many rows as they need and centre in each row, and a pill never grows wider than the screen. Below sm only the first six show, and the "Show 8 more lines" button opens the rest and turns into "Show fewer lines"; it reports whether the list is expanded and names the list it controls. PREVIEW sets how many show. From sm all of them are always shown and the button is hidden.
What moves, and can I turn it off?
The header and bands fade up once on load, and the card fades and zooms in when it opens, with plain CSS and no animation library. With reduced motion on, the block appears in place, the card appears without the zoom and the Shine Button's light fades in place instead of sweeping.