Components
Carousel
A swipeable row of slides with previous/next controls.
Default
A1 / 5
a2 / 5
G3 / 5
g4 / 5
15 / 5
<Carousel className="w-full max-w-xs">
<CarouselContent>
<CarouselItem>A</CarouselItem>
<CarouselItem>a</CarouselItem>
<CarouselItem>G</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>Sizes & spacing
A
a
G
g
1
?
&
<CarouselContent className="-ml-2">
{items.map((i) => (
<CarouselItem className="basis-1/2 pl-2 lg:basis-1/3">…</CarouselItem>
))}
</CarouselContent> Sizes set each item's width with a basis-*
fraction; spacing is the gutter — negative margin on the content
(-ml-2) plus matching item padding (pl-2).
Orientation
buena mono v1.4.2
buena mono v1.4.1
buena mono v1.4.0
buena mono v1.3.3
buena mono v1.3.2
orientation="vertical" swaps the scroll axis; the
built-in previous/next buttons reposition and rotate to match.
Markdown for agents: /design/carousel.md · spec: /design.md