Showcase

An interactive showcase component with smooth content and image transitions.

A lone hiker stands on a rocky cliff above the fog.

Vibrant green aurora borealis glows over snowy pines.

Palm trees silhouetted against a tropical sunset.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/showcase.json

import  {Showcase } from "@/components/ui/showcase";

<Showcase
  items={sections}
  cycleDelay={6000}
  mediaClass="h-[300px] md:h-auto"
/>

An interactive showcase component with smooth content and image transitions.

Property	Type	Default	Description
`items`	Step[]	`required`	List of showcase steps containing heading, description, and media.
`containerClass`	string	`-`	Custom classes applied to the root showcase container.
`cycleDelay`	number	`3000`	Duration (ms) for the progress bar before auto-advancing.
`mediaClass`	string	`h-[400px]`	Controls height and layout of the media section.