What is the Box Carousel component in Klarden UI?

A premium 3D rotating cube/box carousel component with smooth drag interactions, keyboard support, auto-play, and custom card renders.

How do I install the Box Carousel component?

Install the Box Carousel component using the Klarden UI registry CLI: run `npx shadcn@latest add https://klarden.vercel.app/r/box-carousel.json` in your project terminal. No npm package required — the component is copied directly into your source code.

Is the Box Carousel component free to use?

Yes, the Box Carousel component is completely free and open-source under the MIT License. It is part of Klarden UI, a free React component library for design engineers.

Box Carousel — Animated React Component

The BoxCarousel component creates a stunning 3D rotating box/cube interface. Utilizing CSS 3D transforms (preserve-3d) and Framer Motion's physics engines, it delivers smooth drag rotations, auto-snapping, arrow key navigation, and dynamic content rendering.

Preview

Snowy mountain peaks under a starry night sky

Drag or use the arrow keys to rotate the 3D cube.

Usage

Installation

$ pnpm dlx shadcn add https://klarden.vercel.app/r/box-carousel.json

Basic Example

import BoxCarousel from "@/components/ui/box-carousel";

const ITEMS = [
  { id: "1", type: "image", src: "/images/slide-1.jpg", alt: "Slide 1" },
  { id: "2", type: "image", src: "/images/slide-2.jpg", alt: "Slide 2" },
  { id: "3", type: "image", src: "/images/slide-3.jpg", alt: "Slide 3" },
  { id: "4", type: "image", src: "/images/slide-4.jpg", alt: "Slide 4" },
];

export default function App() {
  return (
    <BoxCarousel
      items={ITEMS}
      width={300}
      height={300}
      direction="left"
    />
  );
}

Interactive Premium Variant

This interactive demo showcases the renderItem feature of the Box Carousel. It renders highly styled tech cards (using glassmorphism and custom gradients) on each face of the 3D cube, and exposes direction selectors, auto-play triggers, and slide indicator dots.

Vertical Autoplay: automatically rotates vertically every 2.5 seconds.

Properties

Prop	Type	Default	Description
`items`	`CarouselItem[]`	`[]`	An array of carousel items, where each item contains an id, type ('image' \| 'video'), src, and optional alt text.
`width`	`number`	`—`	The width of the 3D carousel in pixels.
`height`	`number`	`—`	The height of the 3D carousel in pixels.
`direction`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'left'`	The axis and direction of rotation for the 3D box transitions.
`perspective`	`number`	`600`	The CSS 3D perspective value in pixels. Controls the intensity of the 3D depth effect.
`enableDrag`	`boolean`	`true`	Whether mouse/touch drag gestures are enabled for rotating the cube.
`dragSensitivity`	`number`	`0.5`	Controls the sensitivity of drag rotation (higher values mean more rotation per pixel dragged).
`autoPlay`	`boolean`	`false`	Enables automated cyclic rotation transitions.
`autoPlayInterval`	`number`	`3000`	The duration in milliseconds between auto-play transitions.
`renderItem`	`(item: CarouselItem, index: number) => React.ReactNode`	`—`	An optional custom renderer function to draw custom layout elements on the cube's faces.
`onIndexChange`	`(index: number) => void`	`—`	Callback function invoked when the active face index changes.