Navigation & disclosure@neumorphism-ui/carousel

Carousel

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.

@neumorphism-ui/carousel

Registry JSON

Preview

Dashboard

Settings

Analytics

Installation

npx shadcn@latest add @neumorphism-ui/carousel

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

export default function Example() {
  return <Carousel aria-label="Feature tour" className="w-full max-w-md px-12">
    <CarouselContent>
      {["Dashboard", "Settings", "Analytics"].map((item) => <CarouselItem key={item}><div className="grid h-40 place-items-center rounded-[var(--neu-radius-surface)] border border-[var(--neu-edge)] bg-[var(--neu-surface)] [box-shadow:var(--neu-shadow-raised-sm)]">{item}</div></CarouselItem>)}
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>;
}

API Reference

Component	Prop	Type	Default	Description
`Carousel`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Sets the scroll axis and matching arrow-key behavior.
`Carousel`	`opts`	`EmblaOptionsType`	`—`	Passes Embla options such as loop and align.
`Carousel`	`setApi`	`(api: CarouselApi) => void`	`—`	Provides the Embla API instance for external integrations.
`CarouselItem`	`children`	`ReactNode`	`—`	Contains the real content of one slide.
`CarouselPrevious / CarouselNext`	`label`	`string`	`—`	Localizes the accessible name of the previous and next buttons.