Dm DuskMoon React
Standard duskmoon implemented 7 demos

Carousel

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

Import @duskmoon-dev/components/carousel
5 API sections
16 documented props
5 behavior 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

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.
State Start with default props for static examples, then switch to controlled props when state must be shared.
Theme The 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.ts Scenarios: packages/components/src/components/carousel/Carousel.test.tsx
CarouselProps interface 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.
CarouselRef interface
Prop Type Required Description
goTo (index: number) => void Yes goTo configures Carousel.
next () => void Yes next configures Carousel.
prev () => void Yes prev configures Carousel.
CarouselEffect type 
"scrollx" | "fade"
CarouselDotPosition type 
"top" | "bottom" | "left" | "right"
CarouselComponent type 
ForwardRefExoticComponent< CarouselProps & RefAttributes<CarouselRef> >