1
2
3
4
5
---
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 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:
npx shadcn@latest add @fulldev/carouselManual install:
npm install embla-carouselThen copy the component files into src/components/ui/carousel and update the
imports to match your project structure.
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
└── CarouselNextExamples
Sizes
To set the size of the items, use the basis utility classes on
<CarouselItem />.
1
2
3
4
5
---
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><!-- 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><!-- 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 />.
Slide 1
Slide 2
Slide 3
Slide 4
---
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><Carousel>
<CarouselContent class="-ml-4">
<CarouselItem class="pl-4">...</CarouselItem>
<CarouselItem class="pl-4">...</CarouselItem>
<CarouselItem class="pl-4">...</CarouselItem>
</CarouselContent>
</Carousel><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 for more information on props.
See the Embla docs for more information on interactivity.