Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Carousel
description: A carousel with motion and swipe built using Embla.
---

```astro live props={{ name: 'carousel' }}
---
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"
---

<Carousel class="w-full max-w-xl">
  <CarouselContent>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">
      <div
        class="bg-muted flex aspect-square items-center justify-center rounded-md"
      >
        <span class="text-3xl font-semibold">1</span>
      </div>
    </CarouselItem>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">
      <div
        class="bg-muted flex aspect-square items-center justify-center rounded-md"
      >
        <span class="text-3xl font-semibold">2</span>
      </div>
    </CarouselItem>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">
      <div
        class="bg-muted flex aspect-square items-center justify-center rounded-md"
      >
        <span class="text-3xl font-semibold">3</span>
      </div>
    </CarouselItem>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">
      <div
        class="bg-muted flex aspect-square items-center justify-center rounded-md"
      >
        <span class="text-3xl font-semibold">4</span>
      </div>
    </CarouselItem>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">
      <div
        class="bg-muted flex aspect-square items-center justify-center rounded-md"
      >
        <span class="text-3xl font-semibold">5</span>
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

## About

The carousel is built with
[Embla Carousel](https://www.embla-carousel.com/) for motion and swipe. The
Astro components follow the same composition as shadcn/ui.

## Installation

Install the component from the `@fulldev` registry with the shadcn CLI:

```bash
npx shadcn@latest add @fulldev/carousel
```

Manual install:

```bash
npm install embla-carousel
```

Then copy the component files into `src/components/ui/carousel` and update the
imports to match your project structure.

## Usage

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

```astro
<Carousel>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

## Composition

Use the following composition to build a `Carousel`:

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

## Examples

### Sizes

To set the size of the items, use the `basis` utility classes on
`<CarouselItem />`.

```astro live
---
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"
---

<Carousel class="w-full max-w-xl">
  <CarouselContent>
    <CarouselItem class="basis-1/3">
      <div
        class="bg-muted flex aspect-square items-center justify-center rounded-md"
      >
        1
      </div>
    </CarouselItem>
    <CarouselItem class="basis-1/3">
      <div
        class="bg-muted flex aspect-square items-center justify-center rounded-md"
      >
        2
      </div>
    </CarouselItem>
    <CarouselItem class="basis-1/3">
      <div
        class="bg-muted flex aspect-square items-center justify-center rounded-md"
      >
        3
      </div>
    </CarouselItem>
    <CarouselItem class="basis-1/3">
      <div
        class="bg-muted flex aspect-square items-center justify-center rounded-md"
      >
        4
      </div>
    </CarouselItem>
    <CarouselItem class="basis-1/3">
      <div
        class="bg-muted flex aspect-square items-center justify-center rounded-md"
      >
        5
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

```astro
<!-- 33% of the carousel width -->
<Carousel>
  <CarouselContent>
    <CarouselItem class="basis-1/3">...</CarouselItem>
    <CarouselItem class="basis-1/3">...</CarouselItem>
    <CarouselItem class="basis-1/3">...</CarouselItem>
  </CarouselContent>
</Carousel>
```

```astro
<!-- 50% on small screens and 33% on larger screens -->
<Carousel>
  <CarouselContent>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
    <CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
  </CarouselContent>
</Carousel>
```

### Spacing

To set spacing between items, use matching negative margin classes on
`<CarouselContent />` and padding classes on `<CarouselItem />`.

```astro live
---
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"
---

<Carousel class="w-full max-w-xl">
  <CarouselContent class="-ml-2 md:-ml-4">
    <CarouselItem class="pl-2 md:pl-4">
      <div
        class="bg-muted flex aspect-video items-center justify-center rounded-md"
      >
        Slide 1
      </div>
    </CarouselItem>
    <CarouselItem class="pl-2 md:pl-4">
      <div
        class="bg-muted flex aspect-video items-center justify-center rounded-md"
      >
        Slide 2
      </div>
    </CarouselItem>
    <CarouselItem class="pl-2 md:pl-4">
      <div
        class="bg-muted flex aspect-video items-center justify-center rounded-md"
      >
        Slide 3
      </div>
    </CarouselItem>
    <CarouselItem class="pl-2 md:pl-4">
      <div
        class="bg-muted flex aspect-video items-center justify-center rounded-md"
      >
        Slide 4
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

```astro
<Carousel>
  <CarouselContent class="-ml-4">
    <CarouselItem class="pl-4">...</CarouselItem>
    <CarouselItem class="pl-4">...</CarouselItem>
    <CarouselItem class="pl-4">...</CarouselItem>
  </CarouselContent>
</Carousel>
```

```astro
<Carousel>
  <CarouselContent class="-ml-2 md:-ml-4">
    <CarouselItem class="pl-2 md:pl-4">...</CarouselItem>
    <CarouselItem class="pl-2 md:pl-4">...</CarouselItem>
    <CarouselItem class="pl-2 md:pl-4">...</CarouselItem>
  </CarouselContent>
</Carousel>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/carousel) for more information on props.

See the [Embla docs](https://www.embla-carousel.com/) for more information on interactivity.