Yami

Carousel

A carousel with motion and swipe built using Embla.

1
2
3
4
5

Installation

Add the carousel component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/carousel.json

Usage

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

<Carousel className="w-48">
  <CarouselContent>
    <CarouselItem>
      <div className="grid aspect-square place-items-center border border-border">
        1
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Examples

Default

1
2
3
4
5

Code

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

<Carousel className="w-48">
  <CarouselContent>
    <CarouselItem>
      <div className="grid aspect-square place-items-center border border-border">
        1
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>