Works everywhere

Carousel works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/carousel) — the library detects the runtime automatically.

Carousel

Carousel renders a horizontal sliding view of items with optional autoplay, loop, navigation arrows, and pagination dots.

Live demo →

---

Overview

import { Carousel } from "@prokodo/ui/carousel"
;<Carousel
  items={[
    { key: "1", content: <img src="/slide1.jpg" alt="Slide 1" /> },
    { key: "2", content: <img src="/slide2.jpg" alt="Slide 2" /> },
  ]}
  autoplay
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Carousel } from "@prokodo/ui/carousel"

CSS:

import "@prokodo/ui/carousel.css"

---

Props

Prop	Type	Default	Required	Description
children	ReactNode	—	✅	Slide elements rendered inside the carousel.
autoplay	number	—	—	Autoplay interval in ms (0 or undefined disables).
enableControl	boolean	true	—	Show previous/next control buttons.
enableDots	boolean	true	—	Show dot indicators.
translateX	number	—	—	Manual slide offset override.
itemStyle	React.CSSProperties	—	—	Inline styles applied to each slide item.
itemsToShow	number	1	—	Number of items visible at once.
responsive	CarouselResponsive[]	—	—	Breakpoint-based itemsToShow overrides.
className	string	—	—	CSS class on root element.

See src/components/carousel/Carousel.model.ts for the full CarouselProps type.

---

Design Tokens

Customise via CSS custom properties on :root or a scoped ancestor element.

Token	Default	Description
--pk-carousel-overlay-bg	color-mix(in srgb, var(--pk-palette-grey-900) 70%, transparent)	Mobile tutorial overlay background
--pk-carousel-dot-active-bg	var(--pk-color-fg)	Active pagination dot fill
--pk-carousel-button-padding	var(--pk-space-xs)	Prev/next navigation button padding
--pk-carousel-dots-mt	0	Top margin above the dot indicator row
--pk-carousel-controls-mt	var(--pk-space-lg)	Top margin between slides and the controls row (prev/dots/next)

---

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
2.1.1	Keyboard (A)	✅ Fulfilled	All functionality must be operable via keyboard alone, without requiring specific timing.
2.2.2	Pause, Stop, Hide (A)	🔍 Manual review	Animations or auto-rotating content lasting more than 5 s must provide a pause/stop control.
2.4.3	Focus Order (A)	🔍 Manual review	The keyboard focus sequence must preserve meaning and operability in the complete page integration context.
2.4.7	Focus Visible (AA)	🔍 Manual review	A visible keyboard focus indicator must be present on every interactive element. Verify against the applied product theme.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 2 jest-axe assertion(s) across 5 test file(s) · 3 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Carousel in Storybook

---

Source

src/components/carousel/Carousel.model.ts