Carousel

Move through a short sequence of related content with keyboard and pointer controls.

Use Carousel for a small, ordered set of related items when showing every item at once would make the page too dense.

Built on Embla CarouselUpstream API

Workshop1

Bookings

Keep the day moving with one clear schedule.

Workshop1

Vehicles

See every customer vehicle and its service history.

Workshop1

Payments

Track invoices and settled payments in one place.

1 of 3

Import

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@workshop1/ui/components/carousel"

Accessibility

The shared primitive exposes carousel and slide semantics, supports left and right arrow keys, and provides visually hidden labels for its previous and next controls. Keep each slide's heading and content understandable in isolation.

Best practices

Keep the sequence short and provide visible position feedback when useful.
Use buttons for explicit slide navigation instead of relying on swipe alone.
Avoid placing required information only inside a carousel.