Hero 226 - Edge-to-edge slideshow hero with image tiles

Pro

A looping carousel hero with wide slides, background photography, right-aligned title and blurb per slide, CTA strip, and dot pager.

Shadcn Hero 226 block

Component data

ID
hero226
Access
pro
Created
May 4, 2025
Updated
May 31, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Hero 226 block design & features

Hero226 is a slideshow hero built with Shadcn UI carousel, autoplay, and motion fades. Each slide is a tall card where a full-bleed photo sits under a large right-aligned title and description, plus an outlined pill CTA tied to a configurable label. Dots under the track show the active slide and allow jumps.

The carousel basis keeps most of each slide visible so the transition feels like a film strip. Imagery is portrait-leaning with a muted frame behind content for contrast.

It suits storytelling where every slide carries its own headline. Complexity is moderate: you supply one image, title, description, and link per slide.

Mobile uses the same structure with tighter type; dots remain for navigation after interactions pause autoplay.