---
title: "Hero with product UI"
description: "A centred hero over a glimpse of the app built from real components: a studio's Orders screen."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/hero-with-product-ui
---

# Hero with product UI

A centred hero over a glimpse of the app built from real components: a studio's Orders screen.

The headline, a line about the product, two buttons and a proof line sit centred over an Orders screen made of Table, Avatar, Button and InputGroup. The glimpse runs off the section's foot and reads as one labelled image, out of the tab order. Narrower sections drop the sidebar and the less useful columns rather than shrink the text.

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-product-ui
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, avatar, badge, button, input-group, table

## 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