Components
Carousel3DSelect
The 3D Depth Carousel Select is an interactive and visually engaging selection component built with shadcn UI. It arranges options in a 3D circular carousel, allowing users to rotate through items using clicks, arrows, or potentially swipe gestures. Each option can be styled individually with colors, shadows, and highlights, and the currently selected item is prominently centered with a clear visual indicator. The component maintains accessibility through an underlying shadcn Select, ensuring keyboard and form integration, while offering configurable settings such as carousel radius, item size, and rotation behavior. Ideal for media previews, templates, product selections, or any 3D-style picker, this component transforms a standard dropdown into a dynamic, reusable, and highly interactive UI element.
Loading preview...
"use client";
import * as React from "react";
import { Carousel3DSelect, CarouselOption } from "@/components/ui/carousel3dselect";
const options: CarouselOption[] = [
{ value: "template1", label: "Template 1", color: "#f87171" },
{ value: "template2", label: "Template 2", color: "#fbbf24" },
{ value: "template3", label: "Template 3", color: "#34d399" },
{ value: "template4", label: "Template 4", color: "#60a5fa" },
{ value: "template5", label: "Template 5", color: "#a78bfa" },
];
export default function DemoCarousel3DSelect () {
const [selected, setSelected] = React.useState<string>("");
return (
<div className="p-8 flex flex-col gap-8 items-center">
<h1 className="text-xl font-bold">3D Carousel Select Demo</h1>
<Carousel3DSelect
options={options}
radius={150}
itemWidth={100}
itemHeight={60}
placeholder="Pick a template"
onChange={setSelected}
/>
</div>
);
};