“We replaced three dashboards with one screen. The team finally looks at the same numbers.”
Maya Chen
Head of Product · B2B SaaS
Free · MITMarketingtestimonialsmarqueesocial-proofmarketingmotion
Testimonial Marquee
Two rows of testimonial cards drift in opposite directions with soft edge fades, pausing on hover or focus. Star ratings, initials avatars and a calm static grid for reduced motion keep it readable.
Preview
Resize it, switch the theme, replay the entrance — or read the source.
Testimonials
Teams who build calm dashboards
A few words from people using these blocks in production.
“The motion is quiet enough to use in production. Nothing shouts for attention.”
Jonas Weber
Design Director · Fintech
“Setup took an afternoon. It reads like code we would have written ourselves.”
Priya Raman
Engineering Lead · Infrastructure
“Our weekly review went from forty minutes of screenshots to a single glance.”
Elias Moreau
Founder · Analytics
“Every block is legible in dark mode, which is rarer than it should be.”
Nora Kim
Product Designer · Health
“The charts feel considered. Small details, but they add up across the product.”
Tomás Silva
Frontend Lead · Logistics
“We shipped the first dashboard before lunch and have not touched the layout since.”
Hannah Brooks
Head of Data · Retail
“Clear defaults, tidy tokens, no surprises when we themed it for our brand.”
Aiko Tanaka
Design Systems Lead · Media
“It gave our metrics a calm home. The numbers finally have room to breathe.”
Sam Okafor
Product Manager · Education
“A rare UI kit that our designers and engineers both want to keep using.”
Lea Fischer
Co-founder · Productivity
Installation
Add the block to a project that already uses shadcn/ui.
bash
npx shadcn@latest add https://prequelui.terravidhal.me/r/testimonial-marquee.jsonRequires a project that already uses shadcn/ui on React and Tailwind CSS v4. The block is copied into your project as a single file you own and can edit.
Usage
Import the named export and render it with your own data.
Every prop is optional and ships with deterministic demo data, so a bare render shows the block at its default. Pass props to plug in your own data and formatters.
import { TestimonialMarquee } from "@/components/prequel/testimonial-marquee/testimonial-marquee";
export default function DashboardPage() {
return <TestimonialMarquee />;
}import { TestimonialMarquee } from "@/components/prequel/testimonial-marquee/testimonial-marquee";
export default function DashboardPage() {
return <TestimonialMarquee />;
}Props
Every prop is optional and ships with demo-data defaults.
| Prop | Type | Description |
|---|---|---|
className | string | Extra classes merged onto the root element. |
eyebrow | string | — |
title | string | — |
description | string | — |
testimonials | Testimonial[] | — |
speed | number | Drift speed in pixels per second. Defaults to 26. |
Accessibility
The rules every PrequelUI block follows, verified against this block's source.
Charts and graphics expose a text summary via role="img" and an aria-label describing the data.
Interactive charts respond to arrow keys, Home and End, and show tooltips on keyboard focus.
Every button carries a visible focus ring so keyboard users can always see where they are.
The block honours prefers-reduced-motion: animations are skipped and content is fully visible.
Live updates run on timers inside effects and pause when the block is off-screen or hovered.