---
title: "Heroes blocks"
description: "4 Pro heroes blocks for React. The first section of a landing page."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/heroes
---

# Heroes blocks

4 Pro heroes blocks for React. The first section of a landing page.

## Installation

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 any block by name, for example:

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

## Blocks
- [Hero with product UI](https://ui.edbn.me/docs/blocks/hero-with-product-ui): A centred hero over a glimpse of the app built from real components: a studio's Orders screen.
  Install: `npx shadcn@4.19.0 add @edbn/hero-with-product-ui`
- [Hero with photo](https://ui.edbn.me/docs/blocks/hero-with-photo): A split hero with the headline, a line and two buttons beside a photo of the work.
  Install: `npx shadcn@4.19.0 add @edbn/hero-with-photo`
- [Hero with signup](https://ui.edbn.me/docs/blocks/hero-with-signup): A split hero that starts a trial from an email field, beside a glimpse of the week's classes.
  Install: `npx shadcn@4.19.0 add @edbn/hero-with-signup`
- [Hero with stats](https://ui.edbn.me/docs/blocks/hero-with-stats): A hero with the headline beside its buttons, over a row of four specific figures.
  Install: `npx shadcn@4.19.0 add @edbn/hero-with-stats`

All blocks: https://ui.edbn.me/docs/blocks · https://ui.edbn.me/docs/blocks.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