# Stats band

> A marketing band of headline statistics separated by vertical dividers on a card background.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/stats-band).

- Page, with a live preview: https://shadcn.exchange/r/quill/stats-band
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/stats-band-light-7f3cd034ab18c62f.png
- Registry item: https://www.quilldesignsystem.com/r/stats-band.json
- Categories: marketing
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/stats-band.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `separator`

## Notes from the registry

A marketing band of headline statistics separated by vertical dividers on a card background. Do: Color headline numbers from the accent's TEXT cut (--accent-pigment-text), so they follow the page's data-accent and still clear WCAG contrast on every ground. Don't: Use --accent-pigment for text. That is the decorative cut: on a Dawn card it is 2.9:1 for moss (the default accent) and 2.1:1 for gold, both under the 3:1 large-text minimum. It is also what --link and --ring already avoid. And never hardcode a fixed pigment (e.g. --terracotta) — that breaks the moment a consumer sets a different accent. Do: Pair every headline number with its own visible label directly beneath it (e.g. "Components"), as every stat in this band does. Don't: Ship a bare number with no label — a viewer has no way to tell what it counts. Use stat-cards when each number needs its own card with a period-over-period delta — this pattern is a single flat band with no per-item chrome or comparison. Use feature-section when you're describing capabilities, not reporting numbers.

## Files

### `registry/blocks/stats-band.tsx`

```tsx
import { Separator } from '@/components/ui/separator'

const stats = [
  { value: '56', label: 'Components' },
  { value: '40+', label: 'Patterns' },
  { value: '5', label: 'Themes, light and dark' },
  { value: 'AA', label: 'WCAG 2.1 target' },
]

/** A marketing band of headline statistics separated by vertical dividers on a card background. */
export function StatsBand() {
  return (
    <section className="mx-auto w-full max-w-[880px] rounded-xl bg-card px-8 py-10 ring-1 ring-foreground/10">
      <div className="flex flex-col items-center gap-2 text-center">
        <span className="text-xs font-medium tracking-eyebrow uppercase text-ink-muted">
          By the numbers
        </span>
        <h2 className="font-heading text-2xl text-foreground">A system that keeps its promises</h2>
      </div>
      <div className="mt-8 flex items-stretch justify-between gap-6 max-sm:flex-col max-sm:items-center">
        {stats.map((s, i) => (
          <div key={s.label} className="flex flex-1 items-center gap-6 max-sm:w-full max-sm:flex-col max-sm:gap-2">
            {i > 0 && <Separator orientation="vertical" className="max-sm:hidden" />}
            <div className="flex flex-1 flex-col items-center gap-1 text-center">
              <span className="font-heading text-3xl leading-none text-accent-pigment-text">{s.value}</span>
              <span className="text-sm text-muted-foreground">{s.label}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}
```