Carousel

A carousel with motion and swipe built on top of Embla Carousel.

vertical

#Installation

bunx --bun barefoot add carousel

#Usage

1import {2  Carousel, CarouselContent, CarouselItem,3  CarouselPrevious, CarouselNext,4} from "@/components/ui/carousel"56function CarouselDemo() {7  return (8    <Carousel className="w-full max-w-xs">9      <CarouselContent>10        {Array.from({ length: 5 }, (_, i) => (11          <CarouselItem>12            <div className="flex aspect-square items-center justify-center rounded-lg border bg-card p-6">13              <span className="text-4xl font-semibold">{i + 1}</span>14            </div>15          </CarouselItem>16        ))}17      </CarouselContent>18      <CarouselPrevious />19      <CarouselNext />20    </Carousel>21  )22}

#Examples

#Sizes

1"use client"23import {4  Carousel, CarouselContent, CarouselItem,5  CarouselPrevious, CarouselNext,6} from "@/components/ui/carousel"78function CarouselSizes() {9  return (10    <Carousel>11      <CarouselContent className="-ml-2">12        {[1, 2, 3, 4, 5, 6].map((n) => (13          <CarouselItem className="pl-2 basis-1/3">14            <div className="p-1">15              <div className="flex items-center justify-center rounded-lg border bg-card p-4 aspect-square">16                <span className="text-2xl font-semibold">{n}</span>17              </div>18            </div>19          </CarouselItem>20        ))}21      </CarouselContent>22      <CarouselPrevious />23      <CarouselNext />24    </Carousel>25  )26}

#Orientation

1"use client"23import {4  Carousel, CarouselContent, CarouselItem,5  CarouselPrevious, CarouselNext,6} from "@/components/ui/carousel"78function CarouselOrientation() {9  return (10    <Carousel orientation="vertical" opts={{ align: 'start' }}>11      <CarouselContent className="-mt-2 h-[200px]">12        {[1, 2, 3, 4, 5].map((n) => (13          <CarouselItem className="pt-2 basis-1/2">14            <div className="p-1">15              <div className="flex items-center justify-center rounded-lg border bg-card p-4">16                <span className="text-2xl font-semibold">{n}</span>17              </div>18            </div>19          </CarouselItem>20        ))}21      </CarouselContent>22      <CarouselPrevious />23      <CarouselNext />24    </Carousel>25  )26}

#API Reference

Carousel

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	The scroll direction of the carousel.
opts	EmblaOptionsType	-	Embla Carousel options (align, loop, etc.).
className	string	-	Additional CSS classes.

CarouselItem

Prop	Type	Default	Description
children	Child	-	Slide content.
className	string	-	Additional CSS classes (e.g. basis-1/3 for partial slides).