Data

Carousel

Accessible slide show with arrow buttons, dot indicators, keyboard navigation, pointer swipe and optional auto-play that pauses on hover and focus.

Import

import { Carousel } from "@zephora/react";

Examples

Basic

Every direct child becomes one slide.

Slide 1

<Carousel aria-label="Featured">
  <div className="slide">Slide 1</div>
  <div className="slide">Slide 2</div>
  <div className="slide">Slide 3</div>
</Carousel>

Loop and auto-play

`autoPlay` advances on an interval and pauses while hovered or focused; `loop` wraps around the ends.

Spring sale

<Carousel aria-label="Promotions" loop autoPlay={3000}>
  <div className="slide">Spring sale</div>
  <div className="slide">New arrivals</div>
  <div className="slide">Free shipping</div>
</Carousel>

Controlled index

Step 1

Active slide: 1

const [index, setIndex] = React.useState(0);

<Carousel aria-label="Steps" index={index} onIndexChange={setIndex} showDots={false}>
  <div className="slide">Step 1</div>
  <div className="slide">Step 2</div>
  <div className="slide">Step 3</div>
</Carousel>
<Text size="sm" muted>Active slide: {index + 1}</Text>

API

Carousel props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Slides — every direct child becomes one slide.
`index`	`number`	—	Controlled active slide index.
`defaultIndex`	`number`	`0`	Initial slide for uncontrolled usage.
`onIndexChange`	`(index: number) => void`	—	Fires whenever the active slide changes.
`loop`	`boolean`	`false`	Wrap from the last slide back to the first (and vice versa).
`autoPlay`	`number`	—	Auto-advance interval in ms. Pauses on hover and focus.
`showArrows`	`boolean`	`true`	Render previous/next arrow buttons.
`showDots`	`boolean`	`true`	Render dot indicators.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

Keyboard

Key	Action
`ArrowLeft / ArrowRight`	Go to the previous / next slide (root focused).
`Tab`	Moves between the root, arrows and dots. Inactive slides are inert.
`Enter / Space`	Activates the focused arrow or dot button.