Two luminous butterflies on a dark background

Carousel

An animated, swipeable carousel with previous/next buttons, direct slide selection, and accessible slide announcements. Slides advance four seconds after each selection, with progress shown on the active dot.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/carousel.json

Usage

tsx

import Image from "next/image";
import { Carousel } from "@/components/hangry-ui/components/carousel";

<Carousel
  label="Art collection"
>
  <Image src="/1.png" alt="Luminous butterflies" fill sizes="384px" draggable={false} className="object-cover" />
  <Image src="/2.png" alt="Abstract light" fill sizes="384px" draggable={false} className="object-cover" />
  <Image src="/3.png" alt="Stars and a nebula" fill sizes="384px" draggable={false} className="object-cover" />
  <Image src="/4.png" alt="Hands in white dots" fill sizes="384px" draggable={false} className="object-cover" />
</Carousel>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	Default text slides	Slide content. Omit children to use the default text slides.
`label`	`string`	`"Featured collection"`	Accessible carousel name.
`className`	`string`	`""`	Additional CSS classes on the component root.

Setup notes

Uses Tailwind CSS v4, Motion, Lucide icons, and the shared Button and AspectRatio components. Pass slides as children. Image slides use a portrait 9:16 viewport with object-cover. The six preview images live at public/1.png through public/6.png; supply your own images when installing the component.

Swipe left or right, use the previous/next buttons, or select a slide directly. With a control focused, arrow keys navigate and Home/End select the first/last slide. Reduced motion disables the slide transition. Empty collections render nothing; single-slide collections disable navigation.