---
title: "Hero with collection"
description: "A shop hero with the headline and two buttons beside three pieces from the collection, each with its name and price."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/hero-with-collection
---

# Hero with collection

A shop hero with the headline and two buttons beside three pieces from the collection, each with its name and price.

The text sits on the left; on the right, one tall photo of the set in use stands beside two smaller product shots set lower, so the three read as one arrangement. Each piece is one link, its name and price under the photo; the name underlines on hover and the ring wraps the whole piece on focus. Below 1024px the pieces go under the text. On phones the tall photo turns landscape and the two smaller ones sit side by side under it. Photo boxes keep their shape before the images load, and a photo that fails fades to the neutral tile.

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-collection
```

## Dependencies
- edbn: edbn-base, aspect-ratio, 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 6, with install commands: https://ui.edbn.me/docs/blocks/heroes (Markdown: 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