Carousel
A carousel with slide navigation built on embla-carousel-react.
Import
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
} from "@retents/ui/carousel"Usage Guidelines
When to use
- For presenting a sequence of items (images, cards, testimonials) that users browse horizontally.
- When showing all items at once would take too much space.
- For image galleries, product showcases, or onboarding flows.
When NOT to use
- For primary navigation — users may miss content in a carousel. Use visible lists or grids instead.
- For critical content — items beyond the first slide have low engagement. Show key content directly.
- For scrollable lists of uniform items — use ScrollArea instead.
Accessibility
Always provide Previous/Next buttons. Avoid auto-advancing slides — let users control the pace.
Preview
1
2
3
4
5
Usage
<Carousel>
<CarouselContent>
<CarouselItem>Slide 1</CarouselItem>
<CarouselItem>Slide 2</CarouselItem>
<CarouselItem>Slide 3</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>Peer dependencies
This component requires: embla-carousel-react