Showcase

An interactive showcase component with smooth content and image transitions.

Adventure

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

Lights

Vibrant green aurora borealis glows over snowy pines.

View

Palm trees silhouetted against a tropical sunset.

Adventure

Installation

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

Usage

import  {Showcase } from "@/components/ui/showcase";
<Showcase
  items={sections}
  cycleDelay={6000}
  mediaClass="h-[300px] md:h-auto"
/>

API Reference

Showcase

An interactive showcase component with smooth content and image transitions.

Props

PropertyTypeDefaultDescription
itemsStep[]required
List of showcase steps containing heading, description, and media.
containerClassstring-
Custom classes applied to the root showcase container.
cycleDelaynumber3000
Duration (ms) for the progress bar before auto-advancing.
mediaClassstringh-[400px]
Controls height and layout of the media section.

Built withby Ahdeetai.