Showcase

An interactive showcase component with smooth content and image transitions.

Installation

npx shadcn@latest add @scrollxui/showcase

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

<Showcase items={sections} cycleDelay={6000} mediaClass='h-75 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-100`	Controls height and layout of the media section.