Path carousel
Items ride a curved path, the centre one biggest; scroll, swipe or use the arrows to rotate.
Behaviour
- Scroll over it, swipe, press the arrow keys or click a neighbour to rotate.
- With 3+ items it loops.
- A spring moves the rotation and it never overshoots.
- Wheel and arrows only count while the pointer is over it or it is mid-screen, so the page still scrolls.
- Tab to an item and press Enter or Space to bring it to the centre.
- Reduced motion: jumps instead of gliding.
Props
| Prop | Type | Description |
|---|---|---|
| items | ReactNode[] | What rides the path. Each is sized itemWidth × itemHeight. |
| active | number | Drive the rotation from outside. |
| onActive | (index: number) => void | Fires when the centre item changes. |
| itemWidth | numberdefault 300 | Item width before scaling, in px. |
| itemHeight | numberdefault 220 | Item height before scaling, in px. |
| className | string | Extra classes on the root. It fills its parent, so give the parent a height. |
Installation
npx shadcn@latest add https://purrfectui.com/r/path-carousel.jsonHow to use
import { PathCarousel } from "@/components/ui/path-carousel";
<div className="h-[360px]">
<PathCarousel items={cards} onActive={(i) => setCurrent(i)} />
</div>Source code
Loading…
License
MIT. Copy it into your project and change it as you like.