Carousel

Scroll snap React carousel with previous and next buttons, arrow key support and a labelled region. Shows one, two or three slides by breakpoint, no library.

src/registry/ui/carousel.tsx/r/carousel.json

Installation#

bash

npx shadcn@latest add @minidev/carousel

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/carousel.json

Usage#

tsx

import { Carousel } from "@/components/ui/carousel"

export function Example() {
  return (
    <Carousel>
      {[1,2,3,4].map((n) => (
        <Card key={n}><CardHeader><CardTitle>Slide {n}</CardTitle></CardHeader><CardContent className="text-sm text-fg-muted">Carousel card content.</CardContent></Card>
      ))}
    </Carousel>
  )
}

API reference#

Carousel props
Prop	Type	Default
`children*`	`React.ReactNode`	`-`
`className`	`string`	`-`
`label`	`string`	`"Carousel"`

* required

Dependencies#

npm

lucide-react

Built from

Examples#

NavigationSidebars & tabs

Audio PlayerMinimal React audio player row with a play and pause toggle, title, subtitle and an accessible progress bar. Controlled, so it works with any audio source.AvatarShadcn compatible avatar on Base UI with image and initials fallback, three sizes, a status badge and an overlapping avatar group with a plus count.File ListA stacked list of file rows showing each name and metadata such as size or date, with an optional download button per item. Good for React attachment lists.File RowA single file row with an icon, a truncated name, an optional meta line and a ghost download button with an accessible label. Styled with Tailwind.Image GalleryA responsive photo grid of square tiles, two columns on mobile and three on larger screens, each image cropped to fill. Built with React and Tailwind.Image LightboxA clickable image thumbnail that opens a full screen modal of the picture with a dimmed backdrop and a close button. Handy for screenshots and product shots.

All media and upload components

Learn more

What is Scroll snap?Glossary