Loading…

Invite Carousel

beta

Event invitations fanned out as tilted cards — the current one upright in front, its neighbours leaning behind — advancing on a timer or by hand.

Display
2 files
1 npm package
Accessibility notes

Playground

Installation

The CLI installs button as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add invite-carousel

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 { InviteCarousel } from "@/components/ui/invite-carousel";

Examples

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

Default
Gallery
With Images
Manual
Controlled
Right To Left

API

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

<InviteCarousel>

Prop	Type	Default
`events` (required)	`InviteCarouselEvent[]`	—
`aspectRatio` Height as a multiple of width.	`number`	`1.5625`
`autoPlay` Advances on a timer (the source always did), with a stop/start control.	`boolean`	`true`
`cardClassName`	`string`	—
`cardWidth` Any CSS length, including `clamp()` for a responsive width.	`string`	`"15rem"`
`defaultIndex`	`number`	—
`index` Controlled current card.	`number`	—
`interval` Milliseconds per card while playing.	`number`	`3000`
`labels`	`Partial<InviteCarouselLabels>`	—
`onIndexChange`	`(index: number) => void`	—
`showNavigation`	`boolean`	`true`

Plus every attribute of <section> except children.

Accessibility

Follows the APG carousel pattern: a section with aria-roledescription="carousel", each card a labelled group with aria-roledescription="slide", and only the current card exposed (the neighbours are aria-hidden and inert). Automatic rotation — on by default, as in the source — has a stop/start control first in the tab order, pauses on hover and focus, turns the live region off while rotating, and does not start by itself under reduced motion. Previous/next buttons are named, arrow keys (mirrored in RTL), Home and End work inside it, and the fan mirrors under dir="rtl". Background images are decorative unless `imageAlt` is given; participant avatars take their name as alt text.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

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

Prop

Type

Default

events

InviteCarouselEvent[]

—

aspectRatio

Height as a multiple of width.

number

1.5625

autoPlay

Advances on a timer (the source always did), with a stop/start control.

boolean

true

cardClassName

string

—

cardWidth

Any CSS length, including clamp() for a responsive width.

string

"15rem"

defaultIndex

number

—

index

Controlled current card.

number

—

interval

Milliseconds per card while playing.

number

3000

labels

Partial<InviteCarouselLabels>

—

onIndexChange

(index: number) => void

—

showNavigation

boolean

true