Data Displayduskmoonimplemented7 demos

Carousel

Carousel cycles through a limited set of panels while keeping one panel in focus.

Import@duskmoon-dev/components/carousel

5API sections

16documented props

5behavior scenarios

Key API

activeIndexdefaultActiveIndexautoplayautoplaySpeedarrowsdots

Usage

When to use

Use it when users need to move between sections, pages, steps, or contextual actions.
Expose current and disabled state so navigation remains clear to keyboard and screen-reader users.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Wayfinding

Covers the route, section, step, or action-list patterns that help users move through an interface.

Current state

Shows selected, active, open, or current props where the component exposes them.

Primary API surface

Carousel is most often configured through `activeIndex`, `defaultActiveIndex`, `autoplay`, `autoplaySpeed`.

Covered behavior

Renders slides, dots, and arrows

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Research

Basic usage

authored

Import the component stylesheet and Carousel from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Carousel } from "@duskmoon-dev/components/carousel";

export function Example() {
  return (<Carousel arrows>
  <div>Research</div>
  <div>Design</div>
  <div>Ship</div>
</Carousel>);
}

Preview

Research

Renders slides, dots, and arrows

test-backed

Carousel scenario from the component test coverage: renders slides, dots, and arrows.

Source

import "@duskmoon-dev/components/styles.css";
import { Carousel } from "@duskmoon-dev/components/carousel";

export function CarouselRendersSlidesDotsAndDemo() {
  return (<Carousel arrows>
  <div>Research</div>
  <div>Design</div>
  <div>Ship</div>
</Carousel>);
}

Preview

Research

Supports uncontrolled navigation callbacks

test-backed

Carousel scenario from the component test coverage: supports uncontrolled navigation callbacks.

Source

import "@duskmoon-dev/components/styles.css";
import { Carousel } from "@duskmoon-dev/components/carousel";

export function CarouselSupportsUncontrolledNavigationCallbacksDemo() {
  return (<Carousel arrows>
  <div>Research</div>
  <div>Design</div>
  <div>Ship</div>
</Carousel>);
}

Preview

Research

Supports controlled active index and dots config

test-backed

Carousel scenario from the component test coverage: supports controlled active index and dots config.

Source

import "@duskmoon-dev/components/styles.css";
import { Carousel } from "@duskmoon-dev/components/carousel";

export function CarouselSupportsControlledActiveIndexDemo() {
  return (<Carousel arrows>
  <div>Research</div>
  <div>Design</div>
  <div>Ship</div>
</Carousel>);
}

Preview

Research

Supports fade effect and imperative ref

test-backed

Carousel scenario from the component test coverage: supports fade effect and imperative ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Carousel } from "@duskmoon-dev/components/carousel";

export function CarouselSupportsFadeEffectAndDemo() {
  return (<Carousel arrows>
  <div>Research</div>
  <div>Design</div>
  <div>Ship</div>
</Carousel>);
}

Preview

Research

Supports autoplay

test-backed

Carousel scenario from the component test coverage: supports autoplay.

Source

import "@duskmoon-dev/components/styles.css";
import { Carousel } from "@duskmoon-dev/components/carousel";

export function CarouselSupportsAutoplayDemo() {
  return (<Carousel arrows>
  <div>Research</div>
  <div>Design</div>
  <div>Ship</div>
</Carousel>);
}

Preview

Research

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Carousel arrows>
  <div>Research</div>
  <div>Design</div>
  <div>Ship</div>
</Carousel>
</div>

<div data-theme="moonlight">
  <Carousel arrows>
  <div>Research</div>
  <div>Design</div>
  <div>Ship</div>
</Carousel>
</div>

API

The API reference below lists every parsed exported type or interface for Carousel. Start with `activeIndex`, `defaultActiveIndex`, `autoplay`, `autoplaySpeed` for common usage.

Types: packages/components/src/components/carousel/Carousel.types.tsScenarios: packages/components/src/components/carousel/Carousel.test.tsx

CarouselPropsinterface extends Omit< ComponentPropsWithoutRef<"div">, "onChange" >

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures Carousel.
`activeIndex`	`number`	No	activeIndex configures Carousel.
`defaultActiveIndex`	`number`	No	defaultActiveIndex configures Carousel.
`autoplay`	`boolean`	No	autoplay configures Carousel.
`autoplaySpeed`	`number`	No	autoplaySpeed configures Carousel.
`arrows`	`boolean`	No	arrows configures Carousel.
`dots`	`boolean \| { className?: string }`	No	dots configures Carousel.
`dotPosition`	`CarouselDotPosition`	No	dotPosition configures Carousel.
`effect`	`CarouselEffect`	No	effect configures Carousel.
`speed`	`number`	No	speed configures Carousel.
`beforeChange`	`(from: number, to: number) => void`	No	beforeChange configures Carousel.
`afterChange`	`(current: number) => void`	No	afterChange configures Carousel.
`onChange`	`(current: number, previous: number) => void`	No	onChange configures Carousel.

CarouselRefinterface

Prop	Type	Required	Description
`goTo`	`(index: number) => void`	Yes	goTo configures Carousel.
`next`	`() => void`	Yes	next configures Carousel.
`prev`	`() => void`	Yes	prev configures Carousel.

CarouselEffecttype

"scrollx" | "fade"

CarouselDotPositiontype

"top" | "bottom" | "left" | "right"

CarouselComponenttype

ForwardRefExoticComponent< CarouselProps & RefAttributes<CarouselRef> >