Cognition

Components

Carousel

A swipeable, motion-driven set of slides built on Embla. Use it to page through media or cards — with keyboard arrows, drag, and prev/next controls that disable at the ends.

Preview

1
2
3
4
5

Item 1 of 0

Rendered with live Cognition tokens — slides, borders, and the arrow controls remap on theme change, no dark: classes. Drag, use the arrows, or press the left/right keys.

Items per view

1
2
3
4
5
6
{/* two per view */}
<CarouselItem className="basis-1/2">…</CarouselItem>

{/* three per view */}
<CarouselItem className="basis-1/3">…</CarouselItem>
1
2
3
4
5
6
{/* two per view */}
<CarouselItem className="basis-1/2">…</CarouselItem>

{/* three per view */}
<CarouselItem className="basis-1/3">…</CarouselItem>

A slide is basis-full by default. Set basis-1/2 or basis-1/3 on CarouselItem to show two or three at once, and pair it with opts={{ align: "start" }}.

Orientation

1
2
3
4
5
<Carousel orientation="vertical" opts={{ align: "start" }}>
  <CarouselContent className="h-[15rem]">
    <CarouselItem className="basis-1/2">…</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Set orientation="vertical" to page up and down — give CarouselContent a fixed height and the arrows rotate to match.

API

Part
Description
Carousel
Root. Holds opts (Embla options like align / loop), orientation (horizontal | vertical), setApi, and plugins.
CarouselContent
The scrolling track that wraps the slides.
CarouselItem
A single slide. Set how many show per view with a basis-* class (basis-full / basis-1/2 / basis-1/3).
CarouselPrevious / CarouselNext
Arrow controls. They read scroll state from context and disable at the ends automatically.

Don't and Do

Don't

Don't put content users must not miss in a carousel — anything off-screen gets overlooked. And don't hand-roll arrow enabled state; CarouselPrevious / CarouselNext read it from the carousel context.

Do
<Carousel className="w-full max-w-xs">
  <CarouselContent>
    <CarouselItem>…</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

export function Gallery({ items }) {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {items.map((item) => (
          <CarouselItem key={item.id}>{item.content}</CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}
API matches fe-distillery/components/ui/carousel.tsx — Carousel and its Content / Item / Previous / Next parts (plus useCarousel and CarouselApi), built on embla-carousel-react. The arrows are Button (outline), so it inherits Cognition tokens.