AG Design System

Component

Carousel

Horizontally sliding content container with prev/next navigation and optional auto-play.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/carousel

Usage

Use carousels for a series of related visual items like testimonials or feature highlights. Keep to 3–5 slides.

Playground

Preview
Slide 1
Slide 2
Slide 3

Configure

No

Wrap from last slide back to first

No

Automatically advance every 3 seconds

Code

<Carousel className="w-full max-w-sm">
  <CarouselContent>
    <CarouselItem>
      <div className="bg-muted rounded-lg h-40 flex items-center justify-center">
        Slide 1
      </div>
    </CarouselItem>
    <CarouselItem>
      <div className="bg-muted rounded-lg h-40 flex items-center justify-center">
        Slide 2
      </div>
    </CarouselItem>
    <CarouselItem>
      <div className="bg-muted rounded-lg h-40 flex items-center justify-center">
        Slide 3
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrev />
  <CarouselNext />
</Carousel>

Variants & States

Supported variants, sizes, and interaction states for this component.

Configurations

  • Default
  • Looping
  • Auto-play

Do

  • Show navigation arrows so users can control the carousel
  • Keep slide count to 3–5 for best usability

Don't

  • Don't autoplay carousels that contain important information
  • Don't use carousels for primary navigation