Carousel

navigation

Content carousel with slide navigation via arrows and dot indicators. CSS translateX transitions, ARIA roledescription carousel/slide, keyboard accessible.

Import

typescript
import { Carousel } from "packages/ui/src";

Props

CarouselProps

PropTypeRequired
slidesCarouselSlide[]Yes
showDotsbooleanNo
showArrowsbooleanNo
autoPlaynumberNo

Examples

Carousel

Content carousel with slide navigation, arrow buttons, and dot indicators.

With Arrows and Dots

Design Tokens

857+ DTCG tokens powering consistent design

Dots Only (no arrows)

Design Tokens

857+ DTCG tokens powering consistent design

Arrows Only (no dots)

Design Tokens

857+ DTCG tokens powering consistent design

Metadata

Component Metadata
Familynavigation
FrameworksNext.js, Astro/EmDash
DescriptionContent carousel with slide navigation via arrows and dot indicators. CSS translateX transitions, ARIA roledescription carousel/slide, keyboard accessible.
PropsCarouselProps (slides: CarouselSlide[], showDots?: boolean, showArrows?: boolean, autoPlay?: number)
Statessingle-slide, multi-slide, no-arrows, no-dots, navigating
A11y
  • Container has role=region with aria-roledescription=carousel
  • Each slide has role=group with aria-roledescription=slide
  • Dots have role=tablist with aria-selected
  • Arrows have aria-label for previous/next
  • Inactive slides have aria-hidden
Responsive
  • Full width by default
  • Touch-friendly arrows
Motion
  • CSS translateX transition (configurable duration)
  • Dot background transition
Token Dependencies
  • components.carousel.gap
  • components.carousel.arrowSize
  • components.carousel.arrowBg
  • components.carousel.arrowBgHover
  • components.carousel.arrowColor
  • components.carousel.arrowRadius
  • components.carousel.dotSize
  • components.carousel.dotColor
  • components.carousel.dotActiveColor
  • components.carousel.dotGap
  • components.carousel.transitionDuration
  • components.carousel.borderRadius
Content Slotsslides (ReactNode array)
CMS Bindings
  • Slides from CMS collection
  • Image/content from CMS fields
Test Cases
  • Renders slides
  • Has role=region
  • Shows arrow buttons
  • Shows dot indicators
  • Active dot has active class
  • Hides arrows for single slide
  • Slides have roledescription
  • Passes className through