Browse components
Circular Gallery
An endless ribbon of images bent along an arc that you scroll, drag or arrow through, easing to a snap.
Installation
npx shadcn@latest add @glint-ui/circular-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/circular-gallery.json
Usage
import { CircularGallery } from "@/components/ui/circular-gallery";
<CircularGallery items={[{ image: "/a.jpg", text: "Dawn" }, { image: "/b.jpg", text: "Dusk" }]} bend={2} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { image, text? }. |
| bend | number | 2 | Arc curvature. 0 is flat, negative flips it. |
| itemWidth | number | 240 | Card width in px. |
| itemHeight | number | 300 | Image height in px. |
| gap | number | 36 | Px between cards. |
| scrollSpeed | number | 1 | Wheel/drag multiplier. |
| ease | number | 0.08 | Follow easing (lower = floatier). |
| autoScroll | number | 24 | Idle drift in px/s. |
| radius | number | 16 | Corner radius in px. |
| className | string | — | Extra classes for the root element. |