# Benchmarks section

A shadcn/ui stats section for showing why you beat competitors: four side-by-side metrics, each in its own chart, that make your advantage obvious.

> 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:** Comparison pages: why you over a competitor; SaaS and developer-tool landing pages; Launch or investor pages that lead with numbers
- **Category:** Marketing · **Type:** Stats · **Style:** Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/benchmarks-section) · [Screenshot](https://www.craftui.space/llms.md/preview/benchmarks-section.4d28708e.jpg)

![Competitor benchmarks](https://www.craftui.space/llms.md/preview/benchmarks-section.4d28708e.jpg)

## Install

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

This is a paid item (SEC-0002): 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 AktaBenchmarks01 from "@/components/blocks/benchmarks-section";

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `eyebrow` | `string` | `"Benchmarks"` | Small label above the heading. |
| `heading` | `string` | `"We Ranked Top as News Provider"` | The section's main line. |
| `description` | `string` | `"Best news quality at the lowest cost across News APIs, Agentic Search APIs, LL…` | A sentence under the heading, in the muted colour. |
| `metrics` | `BenchmarkMetric[]` | `built-in demo content` | Replace the four default readouts. Each metric picks its own chart form. |
| `className` | `string` | `""` | Extra classes for the section's root element. |

### `BenchmarkMetric`

| Field | Type | Description |
| --- | --- | --- |
| `title` (required) | `string` | The metric's name, at the top of its cell, e.g. "F1 Score". |
| `qualifier` (required) | `string` | What it measures, in brackets after the title, e.g. "accuracy × recall". |
| `direction` (required) | `string` | How to read it, above the chart: "Higher is better" or "Lower is better". |
| `icon` (required) | `typeof ChartAverageIcon` | A Hugeicons icon shown before the title. |
| `headline` (required) | `string` | Unit line beside the headline figure, e.g. "top F1 score". The figure itself is always the brand row's own value, so there is one source for the number. |
| `blurb` (required) | `string` | One or two sentences under the title on why this metric matters. |
| `chart` (required) | `"iso" \| "units" \| "radar" \| "slab" \| "bars"` | How the rows are drawn: "iso" (isometric bars), "units" (a field of units), "radar" (a polar plot), "slab" (stacked slabs) or "bars" (a bar list). Pick the form that tells this metric's story. |
| `rows` (required) | `BenchmarkRow[]` | One row per provider, yours included (mark it with `brand: true`). |

### `BenchmarkRow`

| Field | Type | Description |
| --- | --- | --- |
| `name` (required) | `string` | The provider's name, e.g. "GPT-5.5". |
| `short` | `string` | A short name for the isometric chart's rotated axis label, which has little room. Defaults to `name`. |
| `value` (required) | `string` | The figure as shown, e.g. "62.5". |
| `ratio` (required) | `number` | The value against the largest in this metric, from 0 to 1: what the chart draws. |
| `n` | `number` | The raw number, for chart forms that place it on an absolute scale. |
| `brand` | `boolean` | Marks your own row: the one the section is about, and the only one drawn in the brand colour. |

## Files

The install adds:

- `components/blocks/benchmarks-section.tsx`
- `components/blocks/drawing-styles.ts`

npm dependencies (installed for you): `@hugeicons/core-free-icons`, `@hugeicons/react`.