Default
Plan the sprint
Test with five people
Ship on Friday
Carousel
One slide at a time, with Previous, Next and slide pickers. Never rotates unless you ask; then Pause comes first.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Carousel (tabbed)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Rotating (opt-in)
Plan the sprint
Test with five people
Ship on Friday
Tokens
The 15 design tokens Carousel reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 15 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.action.primary | … | --sd-color-action-primary |
| color.bg.canvas | … | --sd-color-bg-canvas |
| color.bg.muted | … | --sd-color-bg-muted |
| color.bg.on-media | … | --sd-color-bg-on-media |
| color.bg.on-media-hover | … | --sd-color-bg-on-media-hover |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.strong | … | --sd-color-border-strong |
| color.icon.strong | … | --sd-color-icon-strong |
| color.text.on-media | … | --sd-color-text-on-media |
| radius.full | … | --sd-radius-full |
| shape.radius-surface | … | --sd-shape-radius-surface |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
| spacing.stack.sm | … | --sd-spacing-stack-sm |
| target.min | … | --sd-target-min |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/carouselThen import it
import { Carousel } from "@/components/ui/carousel"Props
| Prop | Type | What it does |
|---|---|---|
aria-labelrequired | string | Names the carousel (role region, roledescription "carousel"). |
childrenrequired | ReactNode | One child per slide. |
slideLabel | (index: number, count: number) => stringDefault (i, n) => `Slide ${i} of ${n}` | Label for each slide picker, e.g. (i, n) => `Slide ${i} of ${n}`. Default "Slide i of n". |
autoRotateInterval | number | Rotate on a timer (ms, at least 5000). Off by default (3.2.5). When on, a Pause button comes first, rotation stops on hover and focus, and it never resumes on its own (2.2.2). |
defaultIndex | numberDefault 0 | Slide shown first (0-based). |
className | string |
When to use it
Use it for
- A few equal items where only one fits (onboarding tips, gallery)
Use something else for
- Anything people must read: lay it out on the page
- Marketing banners that rotate on their own
Accessibility
Screen readers announce "Highlights, carousel" then "Slide 2 of 3, tab, selected".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Keep slide text on the on-media backing when it sits over an image
- Give every image a text alternative
Shared patterns it ships with: 3.2.5 (no automatic rotation by default); 2.2.2 (Pause first, stops on hover and focus).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 60 text runs: 0 below 7:1, lowest 15.48:1 |
| Target size | 72 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 72 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 8 of 8, Firefox 8 of 8, WebKit 8 of 8 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches Previous slide (the rotation stops while focus is inside) |
| Tab | Then Next slide |
| Enter | Enter shows the next slide |
| Tab | Tab reaches the Pause control, first of the bottom controls |
| Enter | Enter stops the slide show for good |
| Tab | Tab enters the slide pickers on the selected one |
| ArrowRight | Right picks the next slide |
| Home | Home picks the first |
In Figma
The Figma component is Carousel, with Rotation (Off, On). The Figma library isn’t published yet.
Figma to code: Rotation (Off, On = autoRotateInterval); Slide → defaultIndex (0-based: "Slide 2 of 4" is 1); Slides → children.