3D Carousel

A stacked card carousel with depth, autoplay, keyboard-friendly controls, and swipe. Pass your own items - install ships the demo images next to the component.

Default

Active card centered with neighbors scaled back. Auto-rotates in view; pause on hover. Arrows on desktop, swipe on touch, dots to jump.

Loading…

Installation

CLI

npx @sonojs/ui@latest add 3d-carousel

Also needsnpm i lucide-react motion

Usage

Demo images install under components/carousels/3d-carousel/images/ and are imported by the defaults. Pass your own items when you replace them.

page.tsx

"use client"

import { ThreeDCarousel } from "@/components/carousels/3d-carousel"

export default function Page() {
  return (
    <ThreeDCarousel
      autoRotate
      rotateInterval={4000}
      cardHeight={500}
      className="w-full"
    />
  )
}

Props

Prop	Type	Default	Description
items	ThreeDCarouselItem[]	bundled images	Card list with `id`, `title`, `brand`, `description`, `tags`, `imageUrl`, and `link`. Defaults to static imports from `./images/`.
autoRotate	boolean	true	Advance automatically while the stage is in view and not hovered.
rotateInterval	number	4000	Milliseconds between auto-rotations.
cardHeight	number	500	Height of each card in pixels.
isMobileSwipe	boolean	true	Enable swipe navigation on touch devices.
className	string	-	Extra classes on the outer section.