Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Carousel with Thumbnails
A React carousel with thumbnail navigation buttons that sync with the main carousel for direct slide selection and visual preview
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Ever scrolled through product images and wished you could jump to a specific photo? This React carousel adds clickable thumbnail navigation below the main carousel. Built with shadcn/ui and Embla Carousel API, thumbnails stay in sync with the active slide—click any thumbnail to jump directly. Perfect for product galleries, property listings, or portfolios where users need quick access to specific images.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Standard Carousel
Basic carousel with prev/next navigation
Product Showcase Carousel
Product carousel with ratings and badges
Hero Carousel
Hero banner carousel with overlay content
Image Card
Card with hero image and specifications
Standard Tabs
Tabbed interface for switching content
Standard Dialog
Modal dialog for focused interactions
Questions you might have
React Standard Carousel
A basic React carousel component with previous and next navigation buttons for displaying scrollable content slides
React Product Showcase Carousel
A React product carousel with images, star ratings, price badges, and add-to-cart buttons for e-commerce showcases and recommendations