Carousel

A carousel with motion and swipe built using Embla.

shadcn/ui docs →

Preview

1
2
3
4
5

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/carousel.json

Dependencies: embla-carousel-react

Usage

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

<Carousel className="w-full max-w-xs">
  <CarouselContent>
    {Array.from({ length: 5 }).map((_, i) => (
      <CarouselItem key={i}>
        <div className="p-1">
          <div className="flex aspect-square items-center justify-center rounded-base border-2 border-border bg-main p-6">
            <span className="text-4xl font-heading">{i + 1}</span>
          </div>
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
0