Carousel

Slides in a row to swipe or step through, with arrows, dots, looping and autoplay.

$ pnpm dlx shadcn@latest add https://dashral.com/r/carousel.json

Scheduled reports

Every Monday at 9, in everyone's inbox.

Live visitors

Who's on the site right now, page by page.

Funnels

Where people drop off, step by step.

Cohorts

Who comes back, week after week.

Exports

CSV or Excel, with the columns you choose.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/carousel.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/carousel

Usage

example.tsx

1import { Carousel } from "@/components/dashral/carousel"
2
3<Carousel
4  items={products.map((product) => (
5    <img key={product.id} src={product.image} alt={product.name} className="rounded-lg" />
6  ))}
7  perView={{ base: 1, md: 3 }}
8  label="Featured products"
9/>

Examples

Several at once

perView per screen size (1, 2, 3, then 4 across); controls="below" and indicator="count" put the arrows and “2 / 4” under the row.

Desk lamp

$89

In stock

Oak shelf

$240

Low stock

Linen chair

$320

In stock

Wool rug

$410

Pre-order

Side table

$150

In stock

Floor mirror

$199

In stock

Autoplay

autoplay moves on by itself and loops; it waits while you point at it, and Pause stops it. With text on the slides, controls="below" keeps the arrows off the words.

We replaced four spreadsheets and a weekly meeting. Now the numbers agree, and everyone knows where to look.

Sofia Davis

Head of Operations, Northwind

Set up in an afternoon. The team opens it before their email, and our Monday meeting got twenty minutes shorter.

Liam Johnson

Founder, Lumen

The funnel showed us the one step that cost us half our sign-ups. We fixed it the same week.

Ava Chen

Product lead, Orbital

Product gallery

The big image and the thumbnails follow each other: swipe, use the arrows, or pick a thumbnail.

API reference

Carousel

Also takes every prop of <section>(opens in a new tab).

Prop	Type	Default
`items`	`ReactNode[]` The slides, in order. Required.	—
`perView`	`number \| { base?, sm?, md?, lg?, xl? }` Slides in view at once, or per screen size from the smallest up.	`1`
`gap`	`number` Space between slides, in pixels.	`16`
`index / defaultIndex`	`number` The first slide in view, from 0.	`0`
`onIndexChange`	`(index: number) => void` Another slide comes first: arrows, dots, swiping, keys or autoplay.	—
`loop`	`boolean` From the end, Next goes back to the start, and Previous the other way.	`false`
`autoplay`	`number` Moves on every this many ms and loops. Pauses on hover and focus, with a Pause button; starts paused with reduced motion.	—
`controls`	`"overlay" \| "below" \| "none"` The arrows: over the edges (from sm), in a row under the slides, or none.	`"overlay"`
`indicator`	`"dots" \| "count" \| "none"` Under the slides: a dot per position, “2 / 5”, or nothing.	`"dots"`
`label`	`string` Names it for screen readers, e.g. “Featured products”.	`"Carousel"`
`classNames`	`{ viewport?, slide?, controls?, arrow? }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Tab`	Into the slides, then the arrows and dots
`←`or`→`	Previous / next slide (mirrored right to left)
`Home`or`End`	First / last position

Accessibility

A section with aria-roledescription="carousel", named by label; each slide is a group read as “2 of 5”.
The slide that comes in is announced, except while autoplay moves it; autoplay always has a Pause button and stops while you point at it or work in it.
Arrows and dots are labelled buttons; the current dot has aria-current.

Motion

Slides glide to their place with native smooth scrolling and snap; dragged with the mouse, the row follows the pointer and settles on the next slide when you let go. The current dot stretches on the spring. With reduced motion slides jump and autoplay starts paused.