# Built-to-Ship Hero block

> Split hero with a Built to ship checklist and a bleeding app-shell carousel

Two-column marketing hero for a shadcn/ui registry or MCP tool: a headline, a Built to ship feature checklist, a connect-your-stack logo row (Clerk, n8n, Supabase), and a Connect MCP / Browse Registry action pair, beside an auto-advancing carousel of five product app-shells that bleed off the right edge. The shells are rendered markup rather than screenshots, so they follow the theme in full dark mode. Built on ReUI Badge, IconTile, shadcn Card, Carousel, Item, Button, Kbd. 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-16
- MCP: `get_block("hero-16")`
- Built with: Badge, Button, Card, Carousel, Icon Tile, Item, Kbd
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A 6 item Built to ship checklist and 3 stack wordmarks beside a looping carousel of 5 product shells that pauses on hover

## Agent notes

- `SHIP_FEATURES` in data.tsx is the 6 item checklist of plain strings, and every row gets the same green check
- `APP_SHELLS` in acme-card.tsx configures the 5 carousel cards (ids thunder, acme, reui, northwind, lumen) with sample data; replace them
- The Clerk, n8n and Supabase wordmarks are imported straight into `Hero`, each drawn for light and dark; edit them there, not in data.tsx

## When not to use

- A working sidebar layout the signed in user navigates, not cards that only picture one: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)
- A full width product console under a headline row, not a copy column beside moving cards: use [Split Header Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-14.md) (`get_block("hero-14")`)

## Third-party libraries

- Embla Carousel Autoplay v8: [API reference](https://www.embla-carousel.com/docs/v8/plugins/autoplay), [docs](https://www.embla-carousel.com/docs/v8/plugins)
- Embla Carousel v8: [API reference](https://www.embla-carousel.com/docs/v8/api), [docs](https://www.embla-carousel.com/docs/v8/get-started/react), through shadcn Carousel

## Install

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

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