Browse components
Accordion Gallery
A row of image panels where the hovered or focused one glides open with its caption while the rest compress.
Installation
npx shadcn@latest add @glint-ui/accordion-galleryFirst 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/accordion-gallery.json
Usage
import { AccordionGallery } from "@/components/ui/accordion-gallery";
<AccordionGallery
items={[
{ src: "/alps.jpg", title: "Alps", subtitle: "Switzerland" },
{ src: "/fjord.jpg", title: "Fjords", subtitle: "Norway" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { src, title, subtitle? }. |
| height | number | 380 | Row height in px. |
| expandRatio | number | 5 | How many times wider the open panel is. |
| gap | number | 10 | Px between panels. |
| radius | number | 20 | Corner radius in px. |
| duration | number | 700 | Transition length in ms. |
| defaultIndex | number | 0 | Panel open at rest. |
| className | string | — | Extra classes for the root element. |