Carousel

Product showcases, testimonials, media galleries. Built on embla-carousel-react for the drag/touch/loop mechanics — genuinely hard to get right and accessible from scratch — rendered through Labanaat's own composition API. Embla never appears in the public import surface; useCarousel() is a Labanaat hook for building custom controls beyond Previous/Next/Dots.

<Carousel className="ui-w-full ui-max-w-sm">
<CarouselContent>
  <CarouselItem>
    <div className="ui-flex ui-h-40 ui-items-center ui-justify-center ui-rounded-[var(--ui-radius-lg)] ui-border ui-border-[var(--ui-border)] ui-bg-[var(--ui-bg-subtle)] ui-text-[var(--ui-fg-muted)]">Slide 1</div>
  </CarouselItem>
  <CarouselItem>
    <div className="ui-flex ui-h-40 ui-items-center ui-justify-center ui-rounded-[var(--ui-radius-lg)] ui-border ui-border-[var(--ui-border)] ui-bg-[var(--ui-bg-subtle)] ui-text-[var(--ui-fg-muted)]">Slide 2</div>
  </CarouselItem>
  <CarouselItem>
    <div className="ui-flex ui-h-40 ui-items-center ui-justify-center ui-rounded-[var(--ui-radius-lg)] ui-border ui-border-[var(--ui-border)] ui-bg-[var(--ui-bg-subtle)] ui-text-[var(--ui-fg-muted)]">Slide 3</div>
  </CarouselItem>
</CarouselContent>
<div className="ui-mt-4 ui-flex ui-items-center ui-justify-between">
  <CarouselPrevious />
  <CarouselDots />
  <CarouselNext />
</div>
</Carousel>

Editable — change the code above and the preview updates live.

Drag/swipe the slide directly, use the arrow buttons, the dots, or focus the carousel and press the Left/Right arrow keys.

Looping

<Carousel loop className="ui-w-full ui-max-w-sm">
<CarouselContent>
  <CarouselItem>
    <div className="ui-flex ui-h-32 ui-items-center ui-justify-center ui-rounded-[var(--ui-radius-lg)] ui-border ui-border-[var(--ui-border)] ui-bg-[var(--ui-bg-subtle)]">A</div>
  </CarouselItem>
  <CarouselItem>
    <div className="ui-flex ui-h-32 ui-items-center ui-justify-center ui-rounded-[var(--ui-radius-lg)] ui-border ui-border-[var(--ui-border)] ui-bg-[var(--ui-bg-subtle)]">B</div>
  </CarouselItem>
</CarouselContent>
<div className="ui-mt-4 ui-flex ui-justify-center ui-gap-2">
  <CarouselPrevious />
  <CarouselNext />
</div>
</Carousel>

Editable — change the code above and the preview updates live.

Installation

import {
  Carousel, CarouselContent, CarouselItem,
  CarouselPrevious, CarouselNext, CarouselDots,
} from "@labanaat/ui/carousel";

Props

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Scroll axis
loop	boolean	false	Wraps around at the start/end
startIndex	number	0	Initial slide
onSlideChange	(index) => void	—	Called whenever the selected slide changes

useCarousel() exposes { canScrollPrev, canScrollNext, scrollPrev, scrollNext, selectedIndex, scrollSnaps, scrollTo } for building custom controls.