# Tabbed Console Hero block

> Registry hero with a tabbed console on a sky field

Conversion hero for a shadcn/ui registry or MCP tool: an eyebrow badge, a headline with an amber marker highlight, a star rating with review count, and an Open in Cursor / View in Figma action pair. Below it a framed registry console floats on a sky backdrop: a fixed top bar and sidebar stay put while a six-tab bar swaps the workspace between Overview (registry KPIs, trending blocks, recent activity, and an installs chart), Components, Workflows, Integrations, Templates, and an empty Docs state. Built on ReUI IconTile, Badge, Rating, shadcn Tabs, Card, Item, Progress, and Button. For landing page, dev-tool, and product-launch 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-9
- MCP: `get_block("hero-9")`
- Built with: Badge, Button, Card, Icon Tile, Item, Kbd, Progress, Rating, Tabs
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A 6 tab registry console that advances every 5 seconds and holds on hover or focus, below Open in Cursor and View in Figma actions

## Agent notes

- Tabs come from `HERO_TABS` and views from `WORKSPACES`, so add a tab in both; the sample `TRENDING_BLOCKS` and `INSTALL_DAYS` feed Overview
- `TAB_DWELL_MS` sets the 5000 ms auto advance and `DOCS_DWELL_MS` the 2000 ms Docs pause; set `TAB_DWELL_MS` to 0 to stop the walk
- Open in Cursor and View in Figma pass `render` an anchor to a bare hash, and the rating figures are typed inline in `Hero`

## When not to use

- A first run area that prompts one action, not a marketing console: use the [Empty State blocks](https://web.dev.reui.io/blocks/application/empty-state.md)
- A working sidebar and tab layout that the signed in product runs on: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)

## Install

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

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