orix-UICarousel
A high-fidelity slider with 3D variants, built with pure Tailwind CSS.
Preview
Interactive Preview
Space Exploration
Celestial Horizons
Explore the deep reaches of the neon-lit nebula where stars are born and dreams take flight.
Architecture
Urban Cybernetics
The intersection of biology and technology in the heart of the future's brightest megalopolis.
Virtual Reality
Digital Ecosystems
Synthesizing nature and code to build sustainable virtual worlds for the next generation of users.
Visual Physics
Orientation
Chromatic Signature
Installation
Usage
tsx
import { Carousel } from "@/components/block/carousel"
const DEMO_ITEMS = [
{
id: 1,
title: "Celestial Horizons",
description: "Explore the deep reaches of the neon-lit nebula.",
image: "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&q=80&w=1000",
category: "Space"
},
{
id: 2,
title: "Urban Cybernetics",
description: "The intersection of biology and technology.",
image: "https://images.unsplash.com/photo-1545239351-ef35f43d514b?auto=format&fit=crop&q=80&w=1000",
category: "Architecture"
}
]
export default function Demo() {
return (
<Carousel
items={DEMO_ITEMS}
variant="stack"
primaryColor="rgb(59, 130, 246)"
/>
)
}Props
| Prop | Type | Default |
|---|---|---|
| items | array | - |
| variant | "default""stack""flat""cards" | default |
| orientation | "horizontal""vertical" | horizontal |
| primaryColor | string | rgb(var(--primary)) |