Testimonials Wall
Social proof as masonry columns, vertical marquee columns or a single featured quote.
pnpm dlx @glinui/cli@latest add testimonials-wallLoved by teams
What builders say
Placeholder names and quotes for layout only.
Placeholder quote: the setup took an afternoon and the team stopped asking where the buttons came from.
Placeholder quote: accessible by default, which saved us a long audit.
Placeholder quote: the tokens made dark mode a one line change.
Placeholder quote: we shipped the marketing site in a week using only the blocks.
Placeholder quote: calm, fast and easy to theme.
Placeholder quote: documentation answers the questions before we ask them.
Installation
pnpm dlx @glinui/cli@latest add testimonials-wallPrefer the package?
Usage
Own design, no photos: avatars are initials. Demo names and quotes are placeholders, never real people.
marquee-columns scrolls two columns in opposite directions with the Web Animations API. Hovering or focusing a column pauses it. With reduced motion or motion level none the columns render static and complete.
Variants
Marquee columns and a featured quote.
Marquee columns
Placeholder quote: the setup took an afternoon and the team stopped asking where the buttons came from.
Placeholder quote: the tokens made dark mode a one line change.
Placeholder quote: accessible by default, which saved us a long audit.
Single quote
Placeholder quote: the setup took an afternoon and the team stopped asking where the buttons came from.
<TestimonialsWall items={items} layout="marquee-columns" /><TestimonialsWall items={items} layout="single-quote" />States
Plain shell.
Plain variant
Placeholder quote: the setup took an afternoon and the team stopped asking where the buttons came from.
Placeholder quote: accessible by default, which saved us a long audit.
Placeholder quote: the tokens made dark mode a one line change.
<TestimonialsWall items={items} variant="plain" />In a layout
Social proof, FAQ, CTA and footer stacked as a page ending.
Trusted by builders
Placeholder quote: the setup took an afternoon and the team stopped asking where the buttons came from.
Placeholder quote: accessible by default, which saved us a long audit.
Placeholder quote: the tokens made dark mode a one line change.
FAQ
Start today
<TestimonialsWall items={items} /><FaqSection items={faq} /><CtaBand title="Start today" /><FooterBlock groups={groups} />Accessibility
- A `section` labelled by its heading.
- Each quote is a figure with blockquote and cite.
- Ratings are `role="img"` with a text label.
- The marquee copy is aria-hidden and inert, so screen readers read each quote once.
ARIA Attributes
- `aria-labelledby` on the section
- `aria-label="Rated N out of 5"` on stars
Reduced Motion
No scrolling and no WAAPI animation. Columns show every quote in normal flow.
Affected properties
marquee scrollAPI Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
items | TestimonialItem[] | Yes | - | quote, name, optional role, rating (0 to 5) and id. |
layout | TestimonialsWallLayout | No | masonry-columns | Column flow, auto-scroll columns, or one featured quote. |
variant | BlockVariant | No | ambient (glinr) | Shell look. `plain` under the minimal style, `glass` is opt-in and needs a backdrop. |
eyebrow / title / description | ReactNode | - | - | Section header. The title labels the section. |
duration | number | No | 40 | Seconds per marquee loop. |
description | React.ReactNode | No | - | Auto-generated from TypeScript source. |
eyebrow | React.ReactNode | No | - | Auto-generated from TypeScript source. |
title | React.ReactNode | No | - | Auto-generated from TypeScript source. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { TestimonialsWall } from "@glinui/ui"Dependencies
@glinui/ui@glinui/motion@phosphor-icons/reactGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/testimonials-wall.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata
Primary Props Type
TestimonialsWallProps
TestimonialsWallProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
description | React.ReactNode | No | - | - |
duration | number | No | 40 | Seconds for one marquee loop. |
eyebrow | React.ReactNode | No | - | - |
items | TestimonialItem[] | Yes | - | - |
layout | TestimonialsWallLayout | No | "masonry-columns" | - |
title | React.ReactNode | No | - | - |
variant | BlockVariant | No | - | Shell look of the cards. Omit to follow the ambient style. |