# Shadcn Overlay Thumbnails

> Carousel with overlay thumbnail navigation

- Type: example, free and open source (MIT)
- Component: [Carousel](https://reui.io/components/carousel.md)
- Page: https://reui.io/components/carousel/c-carousel-10
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/carousel.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/carousel.md
- MCP: `get_example("c-carousel-10")`
- Registry item: https://reui.io/r/styles/base-nova/c-carousel-10.json
- Uses: Carousel

## Best for

Thumbnails set over the bottom of a 16:9 slide on a dark gradient, the active one outlined in white

## Agent notes

- The overlay thumbnails are clickable `CarouselItem` divs and nothing in either carousel takes focus, so wrap each image in a button
- `onThumbClick` and `onSelect` pair slides by index across both carousels, so both lists must hold the same items in the same order

## When not to use

- A thumbnail strip in its own row below the main image: use [Thumbnail Strip](https://reui.io/components/carousel/c-carousel-9.md) (`get_example("c-carousel-9")`)

## Third-party libraries

- Embla Carousel v8: [API reference](https://www.embla-carousel.com/docs/v8/api), [docs](https://www.embla-carousel.com/docs/v8/get-started/react), through shadcn Carousel

## Install

```bash
npx shadcn@latest add @reui/c-carousel-10
```

## About Shadcn Carousel

### When to use

- Photo galleries and featured slides shown one at a time, moved by swipe, arrow buttons or a timer
- Rows or columns of cards with several in view, sized per breakpoint or peeking at the next one
- Media viewers where a thumbnail strip or a row of dots tracks the current slide and jumps to any one

### When not to use

- A rotating set of customer testimonials with star ratings and avatars: use the [Review blocks](https://reui.io/blocks/ecommerce/review.md)
- A shop page pairing a photo gallery with a buy box and size and color pickers: use the [Product Detail blocks](https://reui.io/blocks/ecommerce/product-detail.md)
- A storefront section of shop collections with hover browse buttons: use the [Category Card blocks](https://reui.io/blocks/ecommerce/category-card.md)

### Agent notes

- Every slide is a `picsum.photos` placeholder built with `Array.from`; map your own images and alt text from a real array
- Where `CarouselPrevious` and `CarouselNext` are placed, they sit 3rem outside the slides at either end, so leave room or move them through `className`
- `Carousel` reacts only to `ArrowLeft` and `ArrowRight`, vertical ones included, and only while focus sits on a control inside it

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.