# 3D Wheel Carousel — Skecher UI

A reusable, drag-controlled 3D card carousel with auto-rotation, keyboard navigation, blur depth, and reduced-motion support.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/3d-wheel-carousel
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import Image from "next/image";

import { WheelCarousel } from "@/components/ui/3d-wheel-carousel";

const items = Array.from({ length: 8 }, (_, index) => ({
  id: `artwork-${index + 1}`,
  label: `Abstract artwork ${index + 1}`,
  content: (
    <Image
      src={`/images/WheelScrollCarousel/image${index + 1}.png`}
      alt={`Abstract artwork ${index + 1}`}
      width={560}
      height={760}
      className="h-full w-full object-cover"
    />
  ),
}));

export default function WheelCarouselExample() {
  return (
    <WheelCarousel
      items={items}
      radius={560}
      autoRotateSpeed={10}
      pauseOnHover
    />
  );
}
```

## Source files

- components/ui-components/3d-wheel-carousel.tsx — Reusable 3D wheel carousel component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/3d-wheel-carousel
- Registry item with complete source: https://skecher-ui.com/r/3d-wheel-carousel.json
- Component AI context: https://skecher-ui.com/llms/3d-wheel-carousel