Carousel
shadcn/ui
Embla
Horizontal slideshow built on Embla. For galleries, attachments, onboarding steps.
@/components/ui/carouselDefault — one item per view
1
2
3
4
5
Multi-item — 3 per view (basis-1/3)
1
2
3
4
5
6
7
8
In context — ticket attachment viewer
T7A3763 attachments
5 files
Open
ticket-report.pdf
screenshot.png
export-data.xlsx
error-log.txt
network-trace.har
Use arrow keys or click the buttons to browse all 5 attachments
Embla options (opts prop)
| Option | Type | Description |
|---|---|---|
| align | "start" | "center" | "end" | Where items snap to within the container |
| loop | boolean | Wrap around from last to first slide |
| dragFree | boolean | Free-form drag without snapping |
| slidesToScroll | number | How many items to advance per click |
Sub-components
| Component | Role |
|---|---|
| Carousel | Root — wraps Embla. Accepts opts (Embla options) and orientation |
| CarouselContent | Sliding track — contains all CarouselItems |
| CarouselItem | Single slide. basis-* controls how many show per view |
| CarouselPrevious | Back button — absolute positioned, requires relative parent space |
| CarouselNext | Forward button — absolute positioned, requires relative parent space |
Control how many items show per view with Tailwind basis-* on CarouselItem: basis-full (1), basis-1/2 (2), basis-1/3 (3).
On this page