Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Zigzag Story Timeline Testimonials Block for React

A zigzag story rail with four stage bands between the page's rails, from Evaluating to Steady state: a centre line with a dot on each rule, and each stage's name and its quote swapping sides row by row on wide screens, stacked on phones. A Shine Button sits in the header.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Tell how a customer adopted your product, one stage at a time, with this testimonials block for React with Base UI. A compact header (How Brightwater Clinics moved to Tidewell, a fictional scheduling app) carries a Shine Button at its end. Below it, four stages (Evaluating, Pilot, Rollout and Steady state) are bands between the page's rails, each with its own top rule and + marks. From md a centre line runs down the bands like a split divider with a dot where it meets each rule, and each band's stage name and relative time swap sides with its quote row by row, so the story zigzags across the line. On a phone the line goes away and each band stacks its name above its quote. The bands are built from Badge, Avatar and Guides, and the rail is plain CSS, so every colour comes from your theme's tokens. It has no dates, only relative stages that never go stale. Made for customer stories, adoption timelines, case studies and any page where how the story unfolded is the proof.

FAQ

How do I change the stages, the quotes and the story?

Edit the STAGES array at the top of the file. Each stage has a stage name, a when badge, the quote, and the speaker's name, initials and role. The bands, the dots and the alternating sides follow the array, so you can add a fifth stage or drop one. Keep when relative ("Month 4", not a calendar date), and put the stages in the order they happened: the list is read top to bottom.

How does the zigzag work, and what happens on a phone?

Each stage is a list item and a two-column grid from the md breakpoint: its name and its quote each take one half, and they swap halves every row, so the name sits against the centre line on one side and the quote on the other. The line is one hairline down the middle and each dot sits on the band's top rule. Below md the line and the dots are hidden and each band stacks its name above its quote. It is the same list and the same order at every width.

Is the timeline accessible to screen readers and keyboards?

The stages are an ordered list, so a screen reader announces how many there are and reads them in the order they happened; the order never depends on which side a stage sits on. Each stage has an h3 under the section's h2, and each quote is a figure with a blockquote and a caption. The line, the dots and the + marks are decoration and are hidden from assistive technology. The only control is the Shine Button in the header.

Does it work in right-to-left languages?

Yes. The line, the dots, the padding and the sides all use logical properties, so in a right-to-left page the first stage's name moves to the end side and the zigzag mirrors, with no extra markup. Each quote sits in a bdi, so its quotation marks stay in the right place.

Does anything animate, and what about reduced motion?

The header and the bands fade up once on load, in CSS. Under reduced motion they simply appear, and the Shine Button's light fades in instead of sweeping. Nothing loops or plays by itself.

When should I use this instead of the milestone rail or the year review?

Use the zigzag when the stages are chapters of one story and each deserves a full band to itself. The horizontal rail suits shorter, switchable moments, and the year review suits numbers that change as time passes.

  • Pro

    Milestone Rail Testimonials

    Results and figures

    A horizontal rail of five milestones, from Day 1 to Year 1, in a hairline frame: pick one to read what a customer team said at that point, with the milestones already passed checked.

  • Pro

    Quarterly Year Review Testimonials

    Results and figures

    A year in four quarters for a deploy platform, in a card in card: a Q1 to Q4 bar filled up to the chosen quarter, and under it that quarter's quote beside its deploys and uptime.

  • Pro

    Case Study Testimonial

    Results and figures

    A customer case study for a freight-tracking app, split by a hairline divider: the headline, a Shine Button and an at-a-glance list beside Challenge, Solution and Result bands with a headline figure and a pull quote.

  • Pro

    Before and After Testimonials

    Results and figures

    Two quotes from one customer, the first week and month six, as two cells with a connector between them that holds the person and what changed, each change worked out from its before and after.

  • Pro

    Duo Testimonials

    Results and figures

    Two customer quotes from two different segments in one ruled band, split by a column that states the verdict they share as one big figure derived from both of their numbers, under a compact header with a Shine Button.

  • Pro

    Timeline Hero

    Updates and timelines

    A start-aligned hero with a headline, a Shine Button and an outline action over a closing band of four milestone rows on a vertical hairline, shipped, current and planned.

All 100 testimonials blocks