Quote & Result Columns

Customer testimonials as "one complete case summary per column": each column opens with a large results figure (such as +38%) and its label, followed by a short rule, the quote and an author row. No scrolling, no carousel, no switching — the content sits side by side and the numbers lead. On entry the dividers draw from the top down and the columns appear in sequence, and each figure counts up from 0 once its column has appeared; an optional faint contour backdrop, generated from seed, draws once across the top of the section. Wide screens show 2, 3 or 4 columns; narrow screens stack automatically and switch to horizontal dividers.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<QuoteResultColumns/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/quote-result-columns.en.json

Usage

import { QuoteResultColumns } from "@/components/ui/quote-result-columns";

<QuoteResultColumns
  eyebrow="Results"
  title="Let the numbers speak"
  columns={3}
  testimonials={[
    {
      quote: "Once checkout flowed smoothly, far fewer carts were abandoned.",
      highlight: "checkout flowed smoothly",
      name: "Maya Lin",
      role: "Head of Ecommerce",
      company: "Islet Coffee",
      metric: { value: "+38%", label: "Order conversion" },
    },
    {
      quote: "Drivers see reassignments on the road, and steady on-time rates brought us new routes.",
      name: "Ethan Chen",
      role: "Operations Manager",
      company: "Polaris Freight",
      metric: { value: "-27%", label: "Average delivery time" },
    },
    {
      quote: "Tutors step in before learners get stuck, and re-enrolment fills earlier.",
      name: "Grace Chang",
      role: "Director of Studies",
      company: "Lumen Academy",
      metric: { value: "2.4x", label: "Course completion" },
    },
  ]}
/>

Props

QuoteResultColumnsItem

CSS variables

How it works

• The count-up parses the first number in metric.value along with its prefix and suffix: +38% becomes prefix +, 38, suffix %; 1,200 hrs keeps its thousands separator; 2.4x keeps one decimal place. Values without a number (such as "Fully live") are shown as-is with no count.
• Counting starts only after the column has finished appearing and runs for 1200ms with easeOut; server rendering and the pre-entrance state output the final value, so search engines and no-JavaScript readers get the full figure.
• The contour backdrop builds 6 smooth curves from seed with a deterministic pseudo-random generator — no Math.random — so SSR and client match; it draws once over 1600ms on entry and fades out at the bottom with a mask.
• Column dividers are vertical on wide screens (drawn top-down over 600ms) and become horizontal when stacked; with columns set to 4, medium widths use a 2×2 layout and the dividers move to match.
• The entrance plays once (useInView once, 20% visible); remount with a key to replay it.

Accessibility

• The root is a section labelled by its h2 title via aria-labelledby
• Each column is a figure, with the quote in a blockquote and the name, role and company in a figcaption
• The counting figure is hidden from assistive tech and the final value is provided as visually hidden text, so screen readers announce only the final result
• Avatar initials, dividers, the quote mark and the contour backdrop are decorative and set aria-hidden
• When the user's system has reduce motion enabled, columns fade in over 150ms with no movement, dividers appear immediately, figures show their final value without counting, and the contours fade in