---
title: "Hero with stats"
description: "A hero with the headline beside its buttons, over a row of four specific figures."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/hero-with-stats
---

# Hero with stats

A hero with the headline beside its buttons, over a row of four specific figures.

The headline sits on the left and the line and buttons on the right, aligned to its foot, then four figures run across the page. Each figure is a term and value in a description list, so screen readers hear what it counts with the number. The figures go two by two on phones.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/hero-with-stats
```

## Dependencies
- edbn: edbn-base, button

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More heroes blocks

All 4, with install commands: https://ui.edbn.me/docs/blocks/heroes · https://ui.edbn.me/docs/blocks/heroes.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt