Carousel

Accessible carousel built on Embla Carousel with keyboard arrow-key navigation. Exports Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, and the useCarousel context hook.

Preview

Colours

Extract colour palettes and intent tokens

Typography

Capture font families, sizes, and weights

Spacing

Document spacing scales and grid systems

Components

Map reusable component patterns

Effects

Preserve shadow, blur, and border styles

Installation

bash

npx shadcn@latest add @layout/carousel

Usage

tsx

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

Examples

Vertical

Colours

Typography

Spacing

Components

Effects

Guidelines for AI agents

Wrap slides in CarouselItem inside CarouselContent. Set orientation="vertical" and a fixed height on CarouselContent for vertical layouts. Pass opts to forwarded Embla options (loop, align, slidesToScroll). Use useCarousel() inside a child component to access the Embla API imperatively.

Never

Neverplace CarouselPrevious or CarouselNext outside a Carousel; they depend on context
Neverset overflow-hidden on CarouselItem; that breaks the slide reveal animation
Neverhardcode button colours on CarouselPrevious/CarouselNext; they inherit from buttonVariants outline
Neveruse CarouselContent without its parent Carousel; the embla ref will be undefined

Tokens consumed

--layout-border--layout-ring--layout-radius