A rail of tall cards. The centred card grows to 106% and shows its price.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/carouselPlayground
Picked for this autumnWeekend escapes
02 / 052 nights
Weekend in Lisbon
Lisbon, Portugal
2 nights
Two nights in the dunes
Merzouga, Morocco
3 nights
Lake cabin under the aurora
Inari, Finland
5 nights
Island hopping by ferry
Naxos, Greece
4 nights
Slow days in the Dolomites
Val Gardena, Italy
Saved
Picked for this autumnWeekend escapes
02 / 052 nights
Weekend in Lisbon
Lisbon, Portugal
2 nights
Two nights in the dunes
Merzouga, Morocco
3 nights
Lake cabin under the aurora
Inari, Finland
5 nights
Island hopping by ferry
Naxos, Greece
4 nights
Slow days in the Dolomites
Val Gardena, Italy
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/carousel
Accessibility
- A labelled region with slide roles, and the counter is announced.
- Saving is a toggle button with a label.
Motion
- The focused card scales to 106% as the rail moves, written directly so nothing re-renders.
- The price row fades out while flicking and back in when it settles.
- With reduced motion, cards hold still and the arrows jump.
Responsive behavior
- 820 px with 264 px cards on Web. 358 px with 240 px cards on Mobile.
- Every state keeps its height, so nothing shifts.
Performance
- The track scrolls natively. Focus is written to one CSS variable per card, so scrolling does not re-render React.
- The card grows by transform and the track never shifts layout. Arrows and keys move from the card they asked for, so a fast double Next moves two cards. Index state settles 120 ms after scrolling stops.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Carousel and the CarouselCard type. Props: label, eyebrow, title, cards, defaultSaved, onSavedChange, defaultIndex.
- Each card needs id, scene, title and place. tag, meta and price are optional.
- The demo's scenes are drawn. Pass your images as scene, and save with onSavedChange.
Related
CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.Scroll AreaComponentCustom scrolling that keeps the native feel: an overlay bar, edge fades and the Soft tray shell.Aspect RatioComponentHolds an image or video at a fixed ratio, so layouts never jump while media loads.Cylinder CarouselProBlockItems rolling around a cylinder: inside it the centre is smallest and dipped; outside it the centre is largest and raised.