Carousel

Horizontally scrollable content strip.

Examples

Default

Scroll-snap slide.

Forest

Scroll-snap slide.

Rose

Scroll-snap slide.

import { Card, Carousel } from '@var-ui/react';

<Carousel label="Featured themes" itemWidth="220px">
  <Card title="Default">Scroll-snap slide.</Card>
  <Card title="Forest">Scroll-snap slide.</Card>
  <Card title="Rose">Scroll-snap slide.</Card>
</Carousel>

Props

Accessibility

Built on React Aria Components where applicable. Astro and HTML demos use core scroll-snap markup with reduced interactivity (no nudge buttons).

Props

Prop	Type	Default	Description
`label`	`string`	—	Accessible name for the carousel region.
`children`	`ReactNode`	—	Slides to render inside the scroll viewport.
`className`	`string \| undefined`	—	Additional CSS class names merged onto the root element.
`itemWidth`	`string \| undefined`	`280px`	CSS length for each snap item.

Theme this component via createDesignTheme({ components: { carousel: … } }). See Customize for the full override API.

Public classes and data attributes from @var-ui/core carousel().

root

Name	Example	Description
`class`	`var-ui-carousel`	Root / part class name

viewport

Name	Example	Description
`class`	`var-ui-carousel__viewport`	Root / part class name

item

Name	Example	Description
`class`	`var-ui-carousel__item`	Root / part class name

controls

Name	Example	Description
`class`	`var-ui-carousel__controls`	Root / part class name

control

Name	Example	Description
`class`	`var-ui-carousel__control`	Root / part class name

Apply via `recipeProps(recipe(…))` or copy the class / data attributes onto your markup.