# Shadcn Hero blocks > Hero sections with announcement pills, two-tone headlines, dual calls to action, and framed product consoles. - Type: Pro blocks (Marketing) - Page: https://web.dev.reui.io/blocks/marketing/hero - Blocks: 16 - Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup ## 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 ## Third-party libraries - Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 4 of 16 blocks (the docs follow the latest Motion, with no React API break since v12) - Embla Carousel v8: [API reference](https://www.embla-carousel.com/docs/v8/api), [docs](https://www.embla-carousel.com/docs/v8/get-started/react), used by 1 of 16 blocks - Embla Carousel Autoplay v8: [API reference](https://www.embla-carousel.com/docs/v8/plugins/autoplay), [docs](https://www.embla-carousel.com/docs/v8/plugins), used by 1 of 16 blocks ## Blocks - [MCP Usage Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-1.md): Dark MCP usage hero with an animated isometric bar chart and a flagged usage spike. Best for an always dark pitch with teal accents beside an isometric bar chart of 7 usage readings, 1 flagged spike and focusable bars. - [Revenue Console Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-2.md): Aurora Console Hero. Best for a lime marker headline, 1 action beside a star rating and 8 brand wordmarks, next to a revenue console on a drifting photo. - [Capability Chips Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-3.md): Emerald registry hero with an animated isometric scene of floating product blocks. Best for an emerald pitch beside 8 product cards extruded on an isometric plane that lift on hover, with a 4 logo trusted by row. - [People Console Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-4.md): Split Registry Hero With A Console On A Drifting Photo Backdrop. Best for a live status badge and two tone headline over Next.js and v0 capability rows, beside an HR people console on a drifting sky photo. - [Integrations Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-5.md): Integrations Hero With An Isometric Grid Of Floating Brand Tiles. Best for a near black integrations pitch beside 11 brand tiles on an isometric floor, each naming its latest sync or event on hover. - [Security Console Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-6.md): Split registry hero with a live security console over a tower skyline. Best for a security threat console cropped past the right and bottom edges of a rose sky photo, beside a Buy Now and Explore pair. - [Console-First Waitlist](https://web.dev.reui.io/blocks/marketing/hero/hero-7.md): Split cloud platform hero with a pointer-tilted crew console on a black frame. Best for a crew coverage console on a dark wave photo placed before the copy, beside an @ email waitlist that swaps to a confirmation. - [Waitlist Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-8.md): Cloud platform hero with inline email capture and a live analytics console. Best for copy first, then an @ email waitlist that confirms in place, beside a revenue and order queue console on a drawn blue gradient. - [Tabbed Console Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-9.md): Registry hero with a tabbed console on a sky field. 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. - [Code Editor Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-10.md): Centered AI-registry hero with an editable code card and social proof. 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. - [Feature Swap Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-11.md): Split registry hero with a feature card and a framed analytics console. Best for a feature card of 3 cells that swap the console beside it every 5 seconds, with an indigo Start with Cursor action. - [Brand Cloud Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-12.md): Centered registry hero with a brand cloud and a framed analytics console. Best for a centered pitch with an 8 wordmark brand row above a full width crew coverage console on an azure photo. - [Creator Cloud Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-13.md): Centered registry hero with a creator cloud and dual calls to action. 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. - [Split Header Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-14.md): Split-header hero with a product console on a dark wave field. Best for a split header with the headline left and the actions right, bottom aligned over a full width crew console on a dark wave photo. - [Linked Features Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-15.md): Bordered blueprint hero with an announcement badge and a three-cell feature grid. Best for a text pitch seated low in a bordered box over 3 linked feature cells whose highlight steps every 2.2 seconds. - [Built-to-Ship Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-16.md): Split hero with a Built to ship checklist and a bleeding app-shell carousel. 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. 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.