Neumorphism UI

Carousel

Use Carousel for a short ordered collection that people browse one slide at a time.

Preview

Feature tour

Browse dashboard, settings, and analytics slides using drag gestures or the previous and next controls.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/carousel

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Name the carousel, place slides in CarouselContent and CarouselItem, and add labeled previous and next controls. Keep important content discoverable without automatic movement.

"use client";

import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";

export default function Example() {
  return (
    <Carousel aria-label="Product tour" className="max-w-md px-12">
      <CarouselContent>
        {["Overview", "Projects", "Settings"].map(title => (
          <CarouselItem key={title}><div className="p-6">{title}</div></CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

API Reference

Uses Embla Carousel for scroll position and dragging while neumorphism is limited to the slide surfaces and controls. Previous and next buttons disable automatically at the ends.

ComponentPropTypeDefaultDescription
Carouselorientation"horizontal" | "vertical""horizontal"Sets the scroll axis and matching arrow-key behavior.
CarouseloptsEmblaOptionsType—Passes Embla options such as loop and align.
CarouselsetApi(api: CarouselApi) => void—Provides the Embla API instance for external integrations.
CarouselItemchildrenReactNode—Contains the real content of one slide.
CarouselPrevious / CarouselNextlabelstring—Localizes the accessible name of the previous and next buttons.

Accessibility

  • 01

    Give Carousel an aria-label or aria-labelledby that identifies the region.

  • 02

    Slides use group semantics with a carousel slide description, while navigation buttons expose disabled state at the ends.

  • 03

    Horizontal carousels support Left and Right; vertical carousels support Up and Down.