PlumUI

Carousel

A drag-to-swipe slider with momentum, spring snapping, animated dots and an optional story-style autoplay. No carousel library involved.

Data Display
v2.4

Edge config

Read feature flags in under a millisecond, from every region.

v2.3

Instant rollbacks

Promote any previous deployment back to production in one click.

v2.2

Log drains

Stream build and runtime logs to the tools you already use.

v2.1

Preview comments

Leave feedback directly on preview deployments, pinned to the pixel.

v2.0

Monorepo support

Only rebuild the apps that changed. Builds got 4x faster on average.

Playground

Tweak the props, the preview and the code follow.

1
2
3
4
5
6
Props
6
<Carousel>
  <CarouselContent>
    <CarouselItem>…</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
  <CarouselDots />
</Carousel>

Installation

npx @plumsydev/plum-ui add carousel

Also pulls in button automatically.

Usage

import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"
<Carousel>
  <CarouselContent>
    <CarouselItem>…</CarouselItem>
    <CarouselItem>…</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
  <CarouselDots />
</Carousel>

Examples

Several per view

Size slides with basis-* classes. loop wraps around at both ends.

Start from a template

Drag, swipe or use the arrow keys.

Commerce
Next.js · Stripe
Blog
Astro · MDX
SaaS starter
Next.js · Postgres
Docs
Next.js · Search
Portfolio
Vite · Motion
AI chatbot
Next.js · Streaming
Dashboard
Remix · Charts

Autoplay

The active dot fills up like a story. Hovering or focusing the carousel pauses it.

“We moved our whole design system over in an afternoon. The motion is what sold the team.”
LMLéa MartinDesign lead, Northwind
“It feels like the components were made by someone who actually ships product.”
SOSam OkaforStaff engineer, Lumen
“Our onboarding flow got noticeably smoother. Support tickets about it dropped by a third.”
IDInes DuartePM, Parcel
“Owning the code means we never wait on a release to fix a detail.”
TBTom BeckerCTO, Fieldnote

Hover to pause

Custom controls

useCarousel() exposes the index, count and navigation anywhere inside the carousel.

Screen 1acme.app/overview
Overview
Screen 2acme.app/deployments
Deployments
Screen 3acme.app/analytics
Analytics
Screen 4acme.app/logs
Logs
Screen 5acme.app/settings
Settings
Screen 6acme.app/billing
Billing
/ 1

API Reference

Carousel

PropTypeDefault
loop

Wrap from the last slide to the first and back.

booleanfalse
autoplay

Delay between slides in ms. Pauses on hover, focus and drag.

number—
defaultIndex

Initial slide.

number0
onIndexChange

Called when the active slide changes.

(index: number) => void—

CarouselItem

A slide. Use basis-1/2, basis-1/3… to show several per view.

CarouselPrevious / CarouselNext

Button props. Disabled at the ends unless loop.

CarouselDots

Clickable indicators. With autoplay, the active one shows progress.

useCarousel()

Returns index, count, scrollTo, prev, next, canPrev, canNext.

Notes

  • Snap points are measured from the real slides, so mixed widths work.
  • Swipes are projected with their velocity: a quick flick skips further than a slow drag.
  • Arrow keys navigate when focus is inside the carousel; clicks are cancelled after a drag so links don't fire by accident.
PreviousCardNextChart