0

Carousel

PreviousNext

A carousel with motion and swipe built using Embla.

1
2
3
4
5
import * as React from "react"

import { Card, CardContent } from "@/components/ui/card"

Installation

bunx --bun shadcn@latest add @ondo-ui/carousel

Usage

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

Composition

Use the following composition to build a Carousel:

Carousel
├── CarouselContent
│   ├── CarouselItem
│   └── CarouselItem
├── CarouselPrevious
└── CarouselNext

Examples

Sizes

To set the size of the items, you can use the basis utility class on the <CarouselItem />.

1
2
3
4
5
import * as React from "react"

import { Card, CardContent } from "@/components/ui/card"

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 />.

1
2
3
4
5
import * as React from "react"

import { Card, CardContent } from "@/components/ui/card"

Orientation

Use the orientation prop to set the orientation of the carousel.

1
2
3
4
5
import * as React from "react"

import { Card, CardContent } from "@/components/ui/card"

API reference

The component wraps Base UI Carousel and accepts all of its props.