Loading…

3D Carousel

beta

A 3D carousel of cards — a fanned arc or a CoverFlow path — with buttons, dots, arrow keys and swipe.

Display
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add carousel-3d

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Cover Flow
Gallery
Controlled
Right To Left
Custom Content

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Carousel3D>

Prop	Type	Default
`items` (required)	`Carousel3DItem[]`	—
`defaultIndex` Initial slide when uncontrolled. Defaults to the middle one, as in the source.	`number`	—
`dotsLabel` Name of the dot list.	`string`	`"Slides"`
`index` Controlled index of the current slide.	`number`	—
`loop` Wrap from the last slide to the first, and back. The strip rewinds rather than circling.	`boolean`	`false`
`nextLabel`	`string`	`"Next slide"`
`onIndexChange`	`(index: number) => void`	—
`previousLabel`	`string`	`"Previous slide"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`slideLabel` Label of each slide, announced with its position.	`(index: number, count: number) => string`	(i, count) => `${String(i + 1)} of ${String(count)}`
`spread`	`"hover" \| "always" \| "never"`	`"hover"`
`tone`	`"media" \| "mono"`	`"media"`
`variant`	`"arc" \| "coverflow"`	`"arc"`

Plus every attribute of <section> except children.

Accessibility

Follows the APG tabbed carousel: a region with aria-roledescription="carousel", slides that are tabpanels with aria-roledescription="slide" and a position label, named previous/next buttons, and a tablist of dots with a roving tab stop. Arrow keys (mirrored in right-to-left layouts), Home and End move between slides anywhere in the carousel; changes are announced through a polite status. Only the current slide is in the accessibility tree and tab order — the neighbours are inert, and clicking one selects it. Swipe is a pointer convenience with button, dot and key equivalents. It never rotates on its own. Motion stops under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

items

Carousel3DItem[]

—

defaultIndex

Initial slide when uncontrolled. Defaults to the middle one, as in the source.

number

—

dotsLabel

Name of the dot list.

string

"Slides"

index

Controlled index of the current slide.

number

—

loop

Wrap from the last slide to the first, and back. The strip rewinds rather than circling.

boolean

false

nextLabel

string

"Next slide"

onIndexChange

(index: number) => void

—

previousLabel

string

"Previous slide"

size

"sm" | "md" | "lg"

"md"

slideLabel

Label of each slide, announced with its position.

(index: number, count: number) => string

(i, count) => `${String(i + 1)} of ${String(count)}`

spread

"hover" | "always" | "never"

"hover"

tone

"media" | "mono"

"media"

variant

"arc" | "coverflow"

"arc"