Media & time

Carousel

A carousel built on CSS scroll-snap.

Server safeSource

Import

import { Carousel } from '@the_viveksingh/vivek-ui'

One slide at a time

The track is a real scroll container, so touch and trackpad gestures work natively. Arrows, dots and a pause button are all keyboard reachable, and autoPlay stops on hover, focus and reduced motion.

Zero dependencies

Nothing in your lockfile but React.

Static CSS

One stylesheet, no runtime style engine.

Server-safe

Half the library needs no client boundary.

Accessible

Keyboard maps from the WAI-ARIA practices.

MIT

Free for commercial work, with no attribution.

<Carousel loop showArrows showDots label="Why VivekUI">
  {slides.map((slide) => (
    <Stack key={slide.title} gap={2} className="panel">
      <Heading level={4} size="md">{slide.title}</Heading>
      <Text size="sm" tone="muted">{slide.body}</Text>
    </Stack>
  ))}
</Carousel>

Several per view

A responsive object, same shape as Grid cols.

Zero dependencies

Nothing in your lockfile but React.

Static CSS

One stylesheet, no runtime style engine.

Server-safe

Half the library needs no client boundary.

Accessible

Keyboard maps from the WAI-ARIA practices.

MIT

Free for commercial work, with no attribution.

<Carousel slidesPerView={{ base: 1, sm: 2, lg: 3 }} gap={4} loop showArrows showDots>
  {/* slides */}
</Carousel>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Carousel
Prop	Type	Default	Description
`slidesPerView`	`number \| ResponsiveCols`	—	How many slides are visible at once. A number holds at every width; an object is responsive on the same breakpoints as `Grid`. Omit it for the built-in progression (1 → 2 → 3), which responds to the carousel's OWN width via container queries.
`gap`	`StackGap`	—	—
`align`	`'start' \| 'center' \| 'end'`	—	Where a snapped slide comes to rest. Defaults to `start`.
`loop`	`boolean`	—	Wrap past the ends. Best effort: CSS scroll-snap has no notion of a loop, so this makes the arrows and autoplay jump from the last slide back to the first rather than cloning slides. A user dragging the track still stops at the ends.
`showArrows`	`boolean`	—	—
`showDots`	`boolean`	—	—
`autoPlay`	`boolean`	—	Advance on a timer. Pauses on hover, on focus within, and under reduced motion.
`interval`	`number`	—	Milliseconds between automatic advances. Defaults to `5000`, floor of `500`.
`label`	`string`	—	Accessible name of the carousel itself. Defaults to `'Carousel'`.
`slideLabel`	`(index: number, total: number) => string`	—	Accessible name of each slide. Defaults to `"3 of 7"`.
`prevLabel`	`string`	—	—
`nextLabel`	`string`	—	—
`dotLabel`	`(index: number, total: number) => string`	—	Accessible name of a dot. Defaults to `"Go to slide 3 of 7"`.
`playLabel`	`string`	—	—
`pauseLabel`	`string`	—	—
`showPauseButton`	`boolean`	—	The autoplay pause control. On by default whenever `autoPlay` is set, because WCAG 2.2.2 requires a way to stop motion that runs for more than five seconds and hover is not a mechanism a keyboard or touch user has.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Carousel carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.