Carousel

Pass a slides array. The machine manages drag, keyboard navigation, snapping, arrows, and page indicators.

import { Carousel } from '@manti-ui/react';

const slide = (label: string) => (
  <div className="grid place-items-center h-[calc(var(--manti-space-16)*3)] rounded-lg bg-surface-raised text-lg font-semibold">{label}</div>
);

const slides = ['Dough', 'Filling', 'Folding', 'Boiling', 'Serving'].map(
  (label) => slide(label),
);

export default function CarouselBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*9)]">
      <Carousel slides={slides} variant="primary" />
    </div>
  );
}

Several slides per page

Use slidesPerPage for multi-item pages and loop to wrap.

API

Prop	Type	Default	Description
`slides`	`ReactNode[]`	—	The slides to render, one entry per slide.
`variant`	`MantiVariant`	`'primary'`	Variant of the active page indicator.
`slidesPerPage`	`number`	`1`	Number of slides visible per page.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction.
`mouseDrag`	`boolean`	`true`	Allow swiping between slides by dragging with the mouse.
`loop`	`boolean`	—	Wrap from the last slide back to the first.
`page`	`number`	—	Controlled active page.
`defaultPage`	`number`	—	Initial active page for uncontrolled usage.
`onPageChange`	`(page: number) => void`	—	Called whenever the active page changes.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="carousel"][data-part="root"]`	The wrapper around the viewport and controls.
`item-group`	`[data-scope="carousel"][data-part="item-group"]`	The scroll-snapping track holding the slides.
`item`	`[data-scope="carousel"][data-part="item"]`	A single slide.
`control`	`[data-scope="carousel"][data-part="control"]`	The bar holding the arrows and indicators.
`prev-trigger`	`[data-scope="carousel"][data-part="prev-trigger"]`	The button that steps to the previous page.
`next-trigger`	`[data-scope="carousel"][data-part="next-trigger"]`	The button that steps to the next page.
`indicator-group`	`[data-scope="carousel"][data-part="indicator-group"]`	The group of page-position dots.
`indicator`	`[data-scope="carousel"][data-part="indicator"]`	A single page indicator dot.

Tokens

Token	Controls
`--manti-carousel-slide-gap`	slide gap
`--manti-carousel-gap`	gap
`--manti-carousel-radius`	radius
`--manti-carousel-trigger-size`	trigger size
`--manti-carousel-indicator-size`	indicator size
`--manti-carousel-viewport-height`	viewport height

Last updated 13 September 2026