Carousel API

Headless carousel built on CSS scroll-snap with multi-slide display and partial-slide peeking.

Explore these related pages for additional context and usage patterns.

Page	Category
Carousel	Semantic
Step	Providers
createStep	Selection
Atom	Primitives

Carousel.Root

Props

id

string | undefined

Unique identifier for the carousel

label

string | undefined

Accessible label for the carousel region

namespace

string | undefined

Namespace for dependency injection (must match child namespace)

Default: "v0:carousel"

disabled

boolean | undefined

Disables the entire carousel

Default: false

circular

boolean | undefined

Whether navigation wraps around from last to first

Default: false

orientation

CarouselOrientation | undefined

Carousel orientation

Default: "horizontal"

perView

number | undefined

Number of slides visible at once

Default: 1

autoplay

number | undefined

Autoplay interval in milliseconds. 0 disables autoplay.

Default: 0

behavior

ScrollBehavior | undefined

Scroll behavior for programmatic navigation

Default: "smooth"

modelValue

T | T[] | undefined

Slots

default

CarouselRootSlotProps

Carousel.Indicator

Props

label

string | undefined

Accessible label for the indicator group

namespace

string | undefined

Namespace for connecting to parent Carousel.Root

Default: "v0:carousel"

Slots

default

CarouselIndicatorSlotProps

Carousel.Item

Props

id

any

Unique identifier (auto-generated if not provided)

value

V | undefined

Value associated with this slide

disabled

MaybeRefOrGetter<boolean> | undefined

Props

namespace

string | undefined

Namespace for connecting to parent Carousel.Root

Default: "v0:carousel"

Slots

default

CarouselViewportSlotProps