Carousel
Drag, flick, arrow-key or click the dots. Slides snap to the nearest one, side slides dim and shrink, and the active dot stretches.
- Category: Display
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Carousel
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode[] | — | One per slide. |
slideSize | number | 0.82 | |
gap | number | 16 | |
label | string | — |
About Carousel
Carousel moves through slides by drag, flick, arrow keys or the dots. Slides snap to the nearest one, side slides dim and shrink, and the active dot stretches.
Carousel is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Carousel
- Image galleries.
- Product photos.
- Testimonials and quotes.
- Feature tours.
How it works
A drag with momentum snaps to the closest slide. It follows the carousel pattern with a labelled region, slide labels and a live region announcing the current slide.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Carousel
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change slideSize, gap live, and the Code tab updates to match, so the snippet you copy already carries your values.
- slideSize (number, default 0.82).
- gap (number, default 16).
- label (string).
Goes well with Carousel
These display pieces share its tokens and motion language, so they sit together on one page without clashing.
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
Install Carousel
npx shadcn@latest add https://charcoalui.com/r/carousel.jsonCarousel is free and MIT licensed. The command copies carousel.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Tilt Open Image, a Pro piece: A thumbnail that opens full screen as if lifted off the page, tilting in 3D on the way and settling flat.
Frequently asked questions
- Is the carousel accessible?
- Yes. It is a labelled region with slide labels, the arrow keys move between slides, and the current slide is announced.
- How do I install Carousel?
- Run npx shadcn@latest add https://charcoalui.com/r/carousel.json. The shadcn CLI copies carousel.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Carousel free for commercial use?
- Yes. Carousel is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Carousel work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Carousel?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Carousel's props and source and get_install_command returns the exact command.