Testimonial Columns
A wall of quotes in three columns drifting at different speeds, the middle against the others, fading at the edges.
Overview
Quotes are dealt into three columns that scroll endlessly at slightly different speeds, with the middle column moving the other way, so the wall never looks like a single conveyor belt. The top and bottom edges fade into the page, and hovering a column pauses it so a quote can be read.
Each card has the quote, a name and a role, and an initial-based avatar tinted from a soft palette, so the section looks finished before you have headshots. Two columns on tablets, one on phones.
The moving wall is decoration: the same quotes are rendered once as a plain list for screen readers. Light and dark (.dark), one CSS file, and under prefers-reduced-motion the columns stand still.
When to use
- Marketing and product pages that need a complete, responsive band of content.
When not to use
- Inside dense app screens, where a smaller component fits better.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/testimonial-columns.jsonnpx shadcn@latest add https://sundaeui.dev/r/testimonial-columns.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/testimonial-columns.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/testimonial-columns.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy testimonial-columns.tsx and testimonial-columns.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { TestimonialColumns } from '@/components/sundae/testimonial-columns'
<TestimonialColumns
title="Teams stopped dreading Monday."
items={[{ quote: 'We cancelled three spreadsheets in the first week.', name: 'Maya Chen', role: 'Head of Finance, Fieldnote' }]}
/>Props
| Prop | Type | Default |
|---|---|---|
title*Section heading. | string | — |
items*Six to twelve quotes fill the wall well. | { quote: string; name: string; role: string }[] | — |
eyebrowLabel above the heading. | string | 'What people say' |
introSupporting paragraph. | string | — |
durationSeconds for the slowest column to loop. | number | 48 |
Accessibility
- The animated wall is aria-hidden; every quote is also in a visually hidden list.
- Hovering a column pauses it; reduced motion stops all movement.
Customization
- Colours are --tc-* custom properties on .sd-tc; dark values under .dark.
- Swap the TINTS array for your brand colours, or render <img> avatars in figcaption.
FAQ
- Is Testimonial Columns free?
- Testimonial Columns is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Testimonial Columns?
- Run npx shadcn@latest add https://sundaeui.dev/r/testimonial-columns.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Testimonial Columns support keyboard and screen readers?
- The animated wall is aria-hidden; every quote is also in a visually hidden list. Hovering a column pauses it; reduced motion stops all movement.
- Does Testimonial Columns respect reduced motion?
- Hovering a column pauses it; reduced motion stops all movement.
More like this
All sections →- Pro
Billboard Hero
Sections · Brutalist - Pro
Aperture Hero
Sections · Refined - Pro
Chapter Features
Sections · Refined - Pro
Odometer Pricing
Sections · Refined - Pro
Metric Strip
Sections · Refined Margin Quote
Sections · Editorial