# Code Editor Hero block

> Centered AI-registry hero with an editable code card and social proof

Conversion hero for a developer tool: an 'Agent Skills Ready' pill, a two-tone headline, a lede, an editable script.js code card with copy, reset and model/run controls, and a social-proof row of an overlapping avatar group beside a 4.5 star rating and review count. Uses ReUI Badge and Rating, shadcn Avatar group, InputGroup, Separator and IconPlaceholder. For landing pages, dev-tool and SaaS heroes, registry marketing.

- Type: Pro block
- Category: [Hero](https://web.dev.reui.io/blocks/marketing/hero.md)
- Page: https://web.dev.reui.io/blocks/marketing/hero/hero-10
- MCP: `get_block("hero-10")`
- Built with: Avatar, Badge, Dropdown Menu, Input Group, Rating, Separator
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

An editable script.js code card with copy, reset and an AI model picker in place of link buttons, over 7 reviewer faces

## Agent notes

- The Run `InputGroupButton` has no `onClick`; wire it to your agent call with the current `code` and `modelId`
- Replace `DEFAULT_CODE`, `AI_MODELS`, the 7 GitHub avatars in `REVIEWERS` and the `RATING` figures; an empty `DEFAULT_MODEL_ID` shows AI Model
- The 27 reviews link targets a `reviews` anchor that this block never defines, so point its `href` at your reviews section

## When not to use

- A read only snippet with syntax highlighting and a copy button: use [Code Block](https://web.dev.reui.io/components/code-block.md) (`get_component("code-block")`)
- A centered pitch with 2 link actions under a creator cloud and no code card: use [Creator Cloud Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-13.md) (`get_block("hero-13")`)

## Install

```bash
npx shadcn@latest add @reui/hero-10
```

## About Hero blocks

### When to use

- The first screen of a landing page: a headline, a lede and the actions a visitor takes first
- A launch pitch beside the product itself, as a rebuilt console, an isometric scene or a carousel
- A waitlist signup that collects an email above the fold, or trust shown by ratings and logos

### When not to use

- A working sidebar layout for the signed in product, not a decorative picture of one: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)
- A closing band lower on the page that repeats one signup or upgrade ask: use the [CTA blocks](https://web.dev.reui.io/blocks/marketing/cta.md)
- A storefront opener that sells goods, with prices, a product mosaic or a cart: use the [Shop Hero blocks](https://web.dev.reui.io/blocks/ecommerce/shop-hero.md)

### Agent notes

- `Hero` takes no props and renders the page `h1` from copy written inline in components/hero.tsx; keep it the only h1 on the page
- No call to action reaches a route or backend: links point at an `href` hash, form submits only set local state and the rest have no handler
- Each section sets its own `px-4` and `py-12` padding and a `max-w-7xl` track; strip them when your layout already pads content

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.