Content

Carousel

Browses a horizontal sequence with native scrolling and labeled controls.

idle

Usage

import {
	Carousel,
	CarouselContent,
	CarouselIndicators,
	CarouselItem,
	CarouselNext,
	CarouselPrevious,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Carousel>
	<CarouselContent>
		<CarouselItem />
	</CarouselContent>
	<CarouselIndicators />
	<CarouselPrevious />
	<CarouselNext />
</Carousel>

Guidance	Practice
Do	Keep navigation controls labeled and slide ordering meaningful. Allow users to review content at their own pace.

Guidance	Boundary
Scope	Do not hide required instructions in later slides. Use a static list for content that users must compare together.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`Carousel`	`CarouselProps`	`Named region`	Requires aria-label or aria-labelledby.
`CarouselContent`	`CarouselContentProps`	`Horizontal`	Focusable native scroll viewport with snap points.
`CarouselItem`	`CarouselItemProps`	`Full-width slide`	A slide group; provide a distinct accessible label.
`CarouselPrevious / CarouselNext`	`CarouselControlProps`	`Previous slide / Next slide`	System-owned boundary states and scroll behavior. No autoplay or looping.

Content

Browses a horizontal sequence with native scrolling and labeled controls.

idle

import {
	Carousel,
	CarouselContent,
	CarouselIndicators,
	CarouselItem,
	CarouselNext,
	CarouselPrevious,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Carousel>
	<CarouselContent>
		<CarouselItem />
	</CarouselContent>
	<CarouselIndicators />
	<CarouselPrevious />
	<CarouselNext />
</Carousel>

Guidance	Practice
Do	Keep navigation controls labeled and slide ordering meaningful. Allow users to review content at their own pace.

Guidance	Boundary
Scope	Do not hide required instructions in later slides. Use a static list for content that users must compare together.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`Carousel`	`CarouselProps`	`Named region`	Requires aria-label or aria-labelledby.
`CarouselContent`	`CarouselContentProps`	`Horizontal`	Focusable native scroll viewport with snap points.
`CarouselItem`	`CarouselItemProps`	`Full-width slide`	A slide group; provide a distinct accessible label.
`CarouselPrevious / CarouselNext`	`CarouselControlProps`	`Previous slide / Next slide`	System-owned boundary states and scroll behavior. No autoplay or looping.