# Creator Cloud Hero block

> Centered registry hero with a creator cloud and dual calls to action

Conversion hero for a shadcn registry or AI-agent dev tool: an 'Agent Skills Available' announcement pill over a two-tone 'First-class shadcn for AI agents' headline, a curated-registry lede, a seven-person creator cloud paired with a 4.5-star '13.9k Ratings' proof line and a reviews link, and two calls to action, 'Preview in Figma' and a primary 'Start with Cursor' with the Cursor wordmark, over a quiet scroll cue. Uses ReUI Badge and Rating, shadcn Avatar, AvatarGroup and Button, and portable IconPlaceholder icons. For landing pages, registry marketing, and developer-tool heroes.

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

## Best for

A centered pitch with no product art: a 7 face creator stack, a star rating, Figma and Cursor actions and a Scroll Down cue

## Agent notes

- `HERO_PROOF` holds 7 portraits, 5 of them real GitHub profiles (shadcn, Evil Rabbit and others); replace them with your own users
- `HERO_RATING` hard codes the 4.5 star value, the 13.9k Ratings count and the 27 reviews label; set them from your real ratings
- The section is at least one viewport tall through `min-h-svh`, with the content centered in it; drop the class when sections follow

## When not to use

- A centered pitch that shows a row of brand wordmarks and a product console below: use [Brand Cloud Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-12.md) (`get_block("hero-12")`)
- A centered pitch backed by a code sample the visitor can edit and copy: use [Code Editor Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-10.md) (`get_block("hero-10")`)

## Install

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

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