Browse components
Feature Showcase
Feature list with an expanding description and a filling progress bar that auto-advances, crossfading a matching visual on the side.
Installation
npx shadcn@latest add @glint-ui/feature-showcaseFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/feature-showcase.json
Usage
import { FeatureShowcase } from "@/components/ui/feature-showcase";
<FeatureShowcase
interval={5000}
features={[
{ title: "Realtime analytics", icon: <ChartNoAxesColumn />, description: "Live numbers.", visual: <img src="/analytics.png" alt="" /> },
{ title: "Team inbox", icon: <MessagesSquare />, description: "Reply together.", visual: <img src="/inbox.png" alt="" /> },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| interval | number | 5000 | Milliseconds each feature stays active. |
| autoPlay | boolean | true | Advance to the next feature automatically. |
| pauseOnHover | boolean | true | Pause while the pointer or keyboard focus is inside. |
| reverse | boolean | false | Put the visual on the left. |
| features | ReactNode | — | Array of { title, description, icon?, visual }. |
| defaultIndex | ReactNode | — | Feature active on first render (number, default 0). |
| onChange | ReactNode | — | Called with the new active index. |
| className | string | — | Extra classes for the root element. |