All Hero Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

• Hero 1 Dark MCP usage hero with an animated isometric bar chart and a flagged usage spike
• Hero 2 Aurora Console Hero
• Hero 3 Emerald registry hero with an animated isometric scene of floating product blocks
• Hero 4 Split Registry Hero With A Console On A Drifting Photo Backdrop
• Hero 5 Integrations Hero With An Isometric Grid Of Floating Brand Tiles
• Hero 6 Split registry hero with a live security console over a tower skyline
• Hero 7 Split cloud platform hero with a pointer-tilted crew console on a black frame
• Hero 8 Cloud platform hero with inline email capture and a live analytics console
• Hero 9 Registry hero with a tabbed console on a sky field
• Hero 10 Centered AI-registry hero with an editable code card and social proof
• Hero 11 Split registry hero with a feature card and a framed analytics console
• Hero 12 Centered registry hero with a brand cloud and a framed analytics console
• Hero 13 Centered registry hero with a creator cloud and dual calls to action
• Hero 14 Split-header hero with a product console on a dark wave field
• Hero 15 Bordered blueprint hero with an announcement badge and a three-cell feature grid
• Hero 16 Split hero with a Built to ship checklist and a bleeding app-shell carousel

How Each Hero Proves the Claim

• Rebuilt product consoles nine blocks carry a rebuilt console: analytics, security, HR, crew coverage and a six workspace registry shell, mostly assembled from Card, Progress and Avatar and scaled as one piece so the type stays sharp.
• Isometric scenes drawn in code three swap the console for an extruded scene: a seven bar usage chart whose bars are hover and focus targets, a ground plane of eight real product cards, and a grid of eleven brand tiles.
• Star ratings and avatar clouds four lead on social proof: one folds a Rating into the action row itself, one sets the score beside the button pair, and two pair a seven face Avatar group with the score and review count.
• Inline email capture two blocks replace the second button with an InputGroup email field that confirms in place, and one of those wraps the swap in a live region so the confirmation is announced.
• Brand and partner wordmarks five answer the trust question with logos rather than stars: brand rows under the copy on three of the split heroes, an eight wordmark cloud, and a three mark connect your stack row.

Layouts, and Which One Your Page Wants

• Eight are two column splits, copy left and art right. That default covers the isometric scenes, the framed consoles and the Carousel deck of five app shell cards.
• Three are centered single columns with no second track, so they hold up in a narrow container. One of those fills the viewport and ends on a scroll cue.
• Three put a bottom aligned header row over full width art, so a long headline, a lede and a button pair share one baseline above the frame.
• One mirrors the split and seats the product frame on the left, worth having when the section directly below it already leads on the left.
• One drops the product art entirely: a single bordered container with the copy seated low and a three cell feature grid ruled off beneath it.

Motion, Interaction, and What Each Block Loads

Four blocks demo themselves. A six cell tab bar walks its own tabs on a five second dwell, swapping only the workspace inside one fixed app shell. A three cell feature list walks the same way and swaps which of three consoles is mounted. A third slides a highlight across a feature grid, and a fourth auto advances the app shell deck. All four hand control back to the pointer the moment it arrives.

Ambient motion is mostly CSS keyframes behind a reduced motion rule. Four blocks reach for the motion library as well, and the isometric brand grid leans on it hardest, running entrance, float and hover lift on deliberately separate elements while honouring the operating system setting through its own config. The tab walk, the feature cell walk and the highlight walk each check the same media query before they start.

One block ships a real input rather than a demo: an editable script card with a live textarea, a copy button that flags for two seconds, a reset that restores the seed, and a model picker on DropdownMenu. It is the only hero in the set you can type into.

Related Shadcn Marketing Block Categories

A hero only opens the page. These are the sections that carry it from there.

• CTA The mid page band for readers a hero has already convinced, where a headline, a line of support and a button are the whole section.
• FAQ Accordion sections for the objections a hero raises but has no room to answer.
• Contact Enquiry forms, support sections and office panels for the readers a hero sends to sales rather than to signup.
• Blog Post layouts, article grids and content listings for the editorial side of the same site.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

• Shadcn Application Blocks (291) Browse 291 Shadcn Application blocks across 21 categories.
• Shadcn Data Grid Blocks (35) Browse 35 Shadcn Data Grid blocks across 8 categories.
• Shadcn Solutions Blocks (65) Browse 65 Shadcn Solutions blocks across 9 categories.
• Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 12 categories.
• Shadcn Marketing Blocks (40) Browse 40 Shadcn Marketing blocks across 5 categories.