# Metrics testimonials section

A shadcn/ui testimonials section for B2B and SaaS sites that need proof, not praise: rotating customer stories, each paired with the results it delivered.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** SaaS and B2B landing pages; Sales, CRM and revenue tool websites; Customer story and case study pages
- **Category:** Marketing · **Type:** Testimonials · **Style:** Motion, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/testimonials-section) · [Screenshot](https://www.craftui.space/llms.md/preview/testimonials-section.7a343be6.jpg)

![Metrics testimonials section](https://www.craftui.space/llms.md/preview/testimonials-section.7a343be6.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/testimonials-section.json
```

This is a paid item (SEC-0009): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import TestimonialSection from "@/components/blocks/testimonials-section";

export default function Page() {
  return <TestimonialSection />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `testimonials` | `TestimonialItem[]` | `built-in demo content` | Your customers' stories, in the order they play. |
| `title` | `ReactNode` | `( <> Real impact on <span className="text-foreground">real businesses.</span> <…` | The heading above the stories. Wrap the words to stress in `<span className="text-foreground">`: the rest is muted. Defaults to "Real impact on real businesses." |
| `metricLabels` | `[string, string]` | `built-in demo content` | The names of the two results each story shows. Defaults to ["Conversion Rate", "Avg. Sales Cycle"]. |
| `interval` | `number` | `6` | Seconds each story stays before the next. Defaults to 6. |
| `headingLevel` | `1 \| 2 \| 3` | `2` | The heading's level: 1 when this is the page's main heading, 2 or 3 to fit under the page's own. Defaults to 2. |

It also accepts every `<section>` attribute (`className`, `id`, `aria-*` and so on).

### `TestimonialItem`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Unique id: what the animations key on. |
| `name` (required) | `string` | The customer's name. |
| `role` (required) | `string` | Their job title, e.g. "VP of Operations". |
| `company` (required) | `string` | Their company, shown after the role. |
| `image` (required) | `string` | Portrait URL, ideally 4:5 or taller. Shown in black and white, in colour on hover. |
| `quote` (required) | `string` | What they said, without quotation marks: the section adds them. Two to four sentences read best. |
| `metrics` (required) | `[TestimonialMetric, TestimonialMetric]` | The two results they got, in the order of `metricLabels`. |

### `TestimonialMetric`

| Field | Type | Description |
| --- | --- | --- |
| `value` (required) | `string` | The result, large, e.g. "42.8%" or "18 days". |
| `short` | `string` | A shorter value for phones, where space is tight, e.g. "18D". Defaults to `value`. |
| `change` (required) | `string` | The change it shows, beside the value, e.g. "+14.6%" or "-12 days". |
| `trend` (required) | `"up" \| "down"` | Which way the change went: "up" or "down". Picks the arrow; both read as an improvement. |

## Files

The install adds:

- `components/blocks/testimonials-section.tsx`

npm dependencies (installed for you): `lucide-react`, `motion`.