Browse components
Flex Carousel
Row of photo panels where the active one flex-grows open while the rest shrink, auto-advancing with a progress bar.
Installation
npx shadcn@latest add @glint-ui/flex-carouselFirst 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/flex-carousel.json
Usage
import { FlexCarousel } from "@/components/ui/flex-carousel";
<FlexCarousel
items={[
{ image: "/alps.jpg", title: "Alpine Lakes", description: "Glacial water, still air." },
{ image: "/coast.jpg", title: "Coastline" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { image, title, description? }. |
| interval | number | 5000 | Ms each panel stays open. |
| autoPlay | boolean | true | Advance automatically; pauses on hover. |
| expand | number | 6 | Width of the open panel vs a closed one. |
| gap | number | 10 | Px between panels. |
| height | number | 420 | Height in px. |
| className | string | — | Extra classes for the root element. |