NAMCHE UI

Carousel

A swipeable, keyboard-navigable slide track built on Embla.

eu-west-1Dornbirn4 ms from your last deploy
us-east-1Ashburn38 ms from your last deploy
ap-south-1Mumbai112 ms from your last deploy
sa-east-1São Paulo146 ms from your last deploy

Install

pnpm dlx shadcn@latest add @namche/carousel

Usage

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

<Carousel>
  <CarouselContent>
    <CarouselItem>{/* slide */}</CarouselItem>
    <CarouselItem>{/* slide */}</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Carousel wraps embla-carousel-react; pass opts through for Embla's own options (loop, align, and so on), or setApi to read the CarouselApi into a ref for programmatic control. Arrow keys move focus between slides when the carousel has focus, and CarouselPrevious/CarouselNext automatically disable themselves at either end of an unlooped track.

On this page