Carousel

Embla-powered slides with circular sketch arrows outside the viewport, matching the usual carousel layout.

Roughness1.5Lock seedBorderedAnimate

<Carousel roughness={1.5}>
  <CarouselContent>
    <CarouselItem>
      <Card>1</Card>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

CLI install

npx doodleui-react add carousel

Usage

import {
  Card,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "doodleui-react";

<div style={{ maxWidth: 280, margin: "0 auto" }}>
  <Carousel>
    <CarouselContent>
      <CarouselItem>
        <Card style={{ aspectRatio: "1 / 1" }}>1</Card>
      </CarouselItem>
      <CarouselItem>
        <Card style={{ aspectRatio: "1 / 1" }}>2</Card>
      </CarouselItem>
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</div>

Props

Prop	Type	Default	Notes
bordered	boolean	false	Sketch frame around the slide viewport. Arrows stay outside.
orientation	"horizontal" \| "vertical"	"horizontal"	Embla scroll axis.
animate	boolean	true	Draw-in outer frame and nav button borders. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.