# Carousel: Thumbnails

> `<CarouselThumbnails />` follows the main carousel and scrolls to keep the active thumbnail in view.

Example: https://hextaui.com/docs/carousel/examples/thumbnails
Component docs: https://hextaui.com/docs/carousel.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/carousel-thumbnails.json
```

This adds `components/examples/carousel/thumbnails.tsx` with the Carousel component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/carousel/thumbnails.tsx"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselThumbnail,
  CarouselThumbnails,
} from "@/components/ui/carousel"

const photos = Array.from({ length: 10 }, (_, index) => index + 1)

export function CarouselWithThumbnails() {
  return (
    <Carousel aria-label="Gallery" className="w-full max-w-md">
      <CarouselContent>
        {photos.map((photo) => (
          <CarouselItem key={photo}>
            <div className="relative overflow-hidden rounded-xl border">
              <img
                src="/preview/landscape.svg"
                alt={`Landscape ${photo}`}
                draggable={false}
                className="aspect-video w-full object-cover"
              />
              <span className="absolute start-3 top-3 rounded-md bg-background px-2 py-1 text-xs font-medium">
                {photo}
              </span>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <div className="mt-3">
        <CarouselThumbnails>
          {photos.map((photo) => (
            <CarouselThumbnail key={photo} className="w-20">
              <img
                src="/preview/landscape.svg"
                alt=""
                draggable={false}
                className="aspect-video w-full object-cover"
              />
            </CarouselThumbnail>
          ))}
        </CarouselThumbnails>
      </div>
    </Carousel>
  )
}
```

## More Carousel examples

- [API](https://hextaui.com/docs/carousel/examples/api.md)
- [Several per view](https://hextaui.com/docs/carousel/examples/several-per-view.md)
- [Dots and counter](https://hextaui.com/docs/carousel/examples/dots-and-counter.md)
- [Autoplay](https://hextaui.com/docs/carousel/examples/autoplay.md)
- [Vertical](https://hextaui.com/docs/carousel/examples/vertical.md)
- [Controlled](https://hextaui.com/docs/carousel/examples/controlled.md)
- [Rewind and start index](https://hextaui.com/docs/carousel/examples/rewind.md)
- [Links and focusable content](https://hextaui.com/docs/carousel/examples/links.md)
- [Adding and removing slides](https://hextaui.com/docs/carousel/examples/dynamic.md)
- [Nested](https://hextaui.com/docs/carousel/examples/nested.md)
- [Long content and a single slide](https://hextaui.com/docs/carousel/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/carousel/examples/rtl.md)