Hero 20

Pro

A carousel-linked accordion block with a 2-column layout: icons & FAQs on the left, images rotating in sync on the right. Unique features include timed content transition and interactive FAQ accordion.

Figma

Shadcn UI Hero Block

The Hero20 shadcn block integrates an interactive accordion with a synchronized carousel, providing users with detailed, structured content. This component is designed to answer potential user queries dynamically while showcasing visually appealing images that correspond to each accordion item. With an intuitive layout, this shadcn component enhances user engagement by combining informative content with captivating visuals.

The component is structured into two primary sections: an accordion that presents questions along with their corresponding answers and icons, and a synchronized carousel displaying related images. The user can interact with the accordion to view different sections, with the carousel concurrently updating its displayed image to match the active accordion item. This combination effectively delivers information and visual context, ensuring users gain a comprehensive understanding effortlessly.

Dependencies

PackageType
embla-carousel-fadeNPM
lucide-reactNPM
reactNPM
accordion
@shadcn
Registry
badge
@shadcn
Registry
carousel
@shadcn
Registry