Data Display·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Ship faster

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { Carousel } from "@sisyphos-ui/react";

export const Slides = () => (
  <Carousel autoPlay>
    <img src="/a.jpg" alt="" />
    <img src="/b.jpg" alt="" />
    <img src="/c.jpg" alt="" />
  </Carousel>
);

Auto-play

Enable `autoPlay` and tune the pace with `autoPlayInterval`. Pauses on hover/focus.

example.tsxtsx

Ship faster

No loop

`loop={false}` stops wrapping — arrows disable at the edges.

example.tsxtsx

Stay accessible

Dots only

Hide arrow controls with `showArrows={false}` for pure dot-driven navigation.

example.tsxtsx

Ship faster

Controlled index

Drive the carousel from outside UI with `index` + `onIndexChange`.

example.tsxtsx

Slide 1 of 3

Ship faster

API

Prop	Type	Default	Description
index	number	—	Controlled active slide index.
defaultIndex	number	0	Initial slide index when uncontrolled.
onIndexChange	(index: number) => void	—	Called with the new index on every slide change.
autoPlay	boolean	false	Auto-advance every `autoPlayInterval` ms.
autoPlayInterval	number	5000	Time between auto-advances in ms.
loop	boolean	true	Wrap from the last slide back to the first; when off, arrows disable at the edges.
showArrows	boolean	true	Render previous / next arrow buttons (hidden with a single slide).
showDots	boolean	true	Render dot indicators below the viewport.
pauseOnHover	boolean	true	Pause autoplay on mouse enter or focus.
ariaLabel	string	"carousel"	Value applied to the container's `aria-roledescription`.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Carousel WAI-ARIA design pattern.

The container is a focusable role="region" (tabIndex={0}) with aria-roledescription (default "carousel", overridable via ariaLabel).
Each slide is role="group" with aria-roledescription="slide" and an aria-label of "n of total"; off-screen slides are aria-hidden="true".
Dot indicators form a role="tablist" labelled "Slide selector"; each dot is a role="tab" with aria-selected and a "Go to slide n" label.
Arrow buttons carry "Previous slide" / "Next slide" aria-labels and disable at the edges when loop is off.
Autoplay pauses while the carousel is hovered or focused (pauseOnHover).

Keyboard interactions

Key	Action
`ArrowRight`	Advances to the next slide while the carousel region is focused.
`ArrowLeft`	Goes back to the previous slide.
`Tab`	Moves focus from the region to the arrow buttons and dot indicators.

Need more?View on npm →