Carousel
Embla-powered slide carousel with prev/next controls. Supports horizontal and vertical axes.
Install
Import path
Examples
Multiple per view
Show several items at once with basis utilities.
API
Use a state and the setApi prop to get an instance of the carousel API.
Orientation
Use the orientation prop to set the orientation of the carousel.
Plugins
Add plugins such as Autoplay to the carousel using the plugins prop.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Sizes
To set the size of the items, you can use the basis utility class on the <CarouselItem />.
Spacing
To set the spacing between the items, we use a pl-[VALUE] utility on the <CarouselItem /> and a negative -ml-[VALUE] on the <CarouselContent />.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Carousel, CarouselContent, CarouselItem,
CarouselPrevious, CarouselNext,
} from "@codefast/ui/carousel";
<Carousel setApi={setApi}>
<CarouselContent>
<CarouselItem>…</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
API reference
Props for each part of the component. All native element props are also forwarded.
Carousel
Embla-powered. Owns the viewport and exposes the underlying api.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Scroll axis. |
| opts | EmblaOptionsType | — | Embla options, e.g. { align: "start", loop: true }. |
| setApi | (api) => void | — | Receive the Embla api to read the index or call scrollTo(). |
| plugins | EmblaPluginType[] | — | Embla plugins such as Autoplay. |
CarouselItem
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Set basis-1/2, basis-1/3… to show multiple items per view. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Focuses the carousel region, then the prev/next buttons. |
| Arrow+Left | Scrolls to the previous slide. |
| Arrow+Right | Scrolls to the next slide. |
- The region is labelled as a carousel; prev/next buttons disable at the ends.
- Provide a text counter or labelled dots so position isn’t conveyed only visually.
- Avoid autoplay for essential content, or pause it on hover/focus.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Show position with a counter or dot indicators.
- Use basis utilities on items to reveal a peek of the next slide.
Don’t
- Don’t hide critical content inside an autoplaying carousel.
- Don’t remove the prev/next controls on non-touch devices.