Carousel

A component for cycling through elements, like a carousel.

Basic

Default

<div className="mx-auto w-full max-w-xl">
  <Carousel className="w-full">
    <CarouselContent>
      <CarouselItem className="md:basis-1/2 lg:basis-1/3">
        <div className="bg-sand-3 flex aspect-square items-center justify-center rounded-xl p-6">
          <span className="text-4xl font-semibold">
            1
          </span>
        </div>
      </CarouselItem>
      <CarouselItem className="md:basis-1/2 lg:basis-1/3">
        <div className="bg-sand-3 flex aspect-square items-center justify-center rounded-xl p-6">
          <span className="text-4xl font-semibold">
            2
          </span>
        </div>
      </CarouselItem>
      <CarouselItem className="md:basis-1/2 lg:basis-1/3">
        <div className="bg-sand-3 flex aspect-square items-center justify-center rounded-xl p-6">
          <span className="text-4xl font-semibold">
            3
          </span>
        </div>
      </CarouselItem>
      <CarouselItem className="md:basis-1/2 lg:basis-1/3">
        <div className="bg-sand-3 flex aspect-square items-center justify-center rounded-xl p-6">
          <span className="text-4xl font-semibold">
            4
          </span>
        </div>
      </CarouselItem>
      <CarouselItem className="md:basis-1/2 lg:basis-1/3">
        <div className="bg-sand-3 flex aspect-square items-center justify-center rounded-xl p-6">
          <span className="text-4xl font-semibold">
            5
          </span>
        </div>
      </CarouselItem>
    </CarouselContent>
    <div className="flex justify-end gap-2 pt-4">
      <CarouselPrevious className="static translate-y-0" />
      <CarouselNext className="static translate-y-0" />
    </div>
  </Carousel>
</div>

Sizing

Item Sizes

<div className="mx-auto w-full max-w-xl">
  <Carousel>
    <CarouselContent>
      <CarouselItem className="basis-1/2 md:basis-1/3 lg:basis-1/4">
        <div className="bg-sand-3 flex aspect-square items-center justify-center rounded-xl p-6">
          <span className="text-xl font-semibold">
            1
          </span>
        </div>
      </CarouselItem>
      <CarouselItem className="basis-1/2 md:basis-1/3 lg:basis-1/4">
        <div className="bg-sand-3 flex aspect-square items-center justify-center rounded-xl p-6">
          <span className="text-xl font-semibold">
            2
          </span>
        </div>
      </CarouselItem>
      <CarouselItem className="basis-1/2 md:basis-1/3 lg:basis-1/4">
        <div className="bg-sand-3 flex aspect-square items-center justify-center rounded-xl p-6">
          <span className="text-xl font-semibold">
            3
          </span>
        </div>
      </CarouselItem>
      <CarouselItem className="basis-1/2 md:basis-1/3 lg:basis-1/4">
        <div className="bg-sand-3 flex aspect-square items-center justify-center rounded-xl p-6">
          <span className="text-xl font-semibold">
            4
          </span>
        </div>
      </CarouselItem>
      <CarouselItem className="basis-1/2 md:basis-1/3 lg:basis-1/4">
        <div className="bg-sand-3 flex aspect-square items-center justify-center rounded-xl p-6">
          <span className="text-xl font-semibold">
            5
          </span>
        </div>
      </CarouselItem>
    </CarouselContent>
    <div className="flex justify-end gap-2 pt-4">
      <CarouselPrevious className="static translate-y-0" />
      <CarouselNext className="static translate-y-0" />
    </div>
  </Carousel>
</div>

Content

With Cards

Card Title 1

This is some sample content for the card that demonstrates a more complex carousel item.

Card Title 2

This is some sample content for the card that demonstrates a more complex carousel item.

Card Title 3

This is some sample content for the card that demonstrates a more complex carousel item.

Card Title 4

This is some sample content for the card that demonstrates a more complex carousel item.

Card Title 5

This is some sample content for the card that demonstrates a more complex carousel item.

<div className="mx-auto w-full max-w-xl">
  <Carousel>
    <CarouselContent>
      <CarouselItem className="md:basis-1/2">
        <div className="bg-sand-2 border-sand-6 flex flex-col gap-2 rounded-xl border p-6">
          <h3 className="text-sand-12 text-lg font-medium">
            Card Title 
            1
          </h3>
          <p className="text-sand-11 text-sm">
            This is some sample content for the card that demonstrates a more complex carousel item.
          </p>
          <button className="text-sand-12 hover:bg-sand-3 mt-2 w-fit rounded-md border px-4 py-1 text-sm">
            Action
          </button>
        </div>
      </CarouselItem>
      <CarouselItem className="md:basis-1/2">
        <div className="bg-sand-2 border-sand-6 flex flex-col gap-2 rounded-xl border p-6">
          <h3 className="text-sand-12 text-lg font-medium">
            Card Title 
            2
          </h3>
          <p className="text-sand-11 text-sm">
            This is some sample content for the card that demonstrates a more complex carousel item.
          </p>
          <button className="text-sand-12 hover:bg-sand-3 mt-2 w-fit rounded-md border px-4 py-1 text-sm">
            Action
          </button>
        </div>
      </CarouselItem>
      <CarouselItem className="md:basis-1/2">
        <div className="bg-sand-2 border-sand-6 flex flex-col gap-2 rounded-xl border p-6">
          <h3 className="text-sand-12 text-lg font-medium">
            Card Title 
            3
          </h3>
          <p className="text-sand-11 text-sm">
            This is some sample content for the card that demonstrates a more complex carousel item.
          </p>
          <button className="text-sand-12 hover:bg-sand-3 mt-2 w-fit rounded-md border px-4 py-1 text-sm">
            Action
          </button>
        </div>
      </CarouselItem>
      <CarouselItem className="md:basis-1/2">
        <div className="bg-sand-2 border-sand-6 flex flex-col gap-2 rounded-xl border p-6">
          <h3 className="text-sand-12 text-lg font-medium">
            Card Title 
            4
          </h3>
          <p className="text-sand-11 text-sm">
            This is some sample content for the card that demonstrates a more complex carousel item.
          </p>
          <button className="text-sand-12 hover:bg-sand-3 mt-2 w-fit rounded-md border px-4 py-1 text-sm">
            Action
          </button>
        </div>
      </CarouselItem>
      <CarouselItem className="md:basis-1/2">
        <div className="bg-sand-2 border-sand-6 flex flex-col gap-2 rounded-xl border p-6">
          <h3 className="text-sand-12 text-lg font-medium">
            Card Title 
            5
          </h3>
          <p className="text-sand-11 text-sm">
            This is some sample content for the card that demonstrates a more complex carousel item.
          </p>
          <button className="text-sand-12 hover:bg-sand-3 mt-2 w-fit rounded-md border px-4 py-1 text-sm">
            Action
          </button>
        </div>
      </CarouselItem>
    </CarouselContent>
    <div className="flex justify-end gap-2 pt-4">
      <CarouselPrevious className="static translate-y-0" />
      <CarouselNext className="static translate-y-0" />
    </div>
  </Carousel>
</div>