CarouselPro
Swipeable slides with arrows, animated dots, keys and pausable autoplay.
Dashboards
KPIs, charts and tables that explain themselves.
Slide 1 of 4
When to use
- Featured content, product galleries and onboarding slides.
When not to use
- Critical content: most people never see slide 3.
- Comparing items: use a grid.
Installation
Usage
Import it from @/components/ui/carousel after installing.
example.tsx
import { Carousel } from "@/components/ui/carousel";
<Carousel aria-label="Highlights" autoPlay={5000} slides={features.map((f) => <FeatureSlide key={f.id} feature={f} />)} />API reference
Carousel
Full-width slides with drag, arrows, dots, keys and optional autoplay.
| Prop | Type | Default | Description |
|---|---|---|---|
| slides | ReactNode[] | – | One element per slide. |
| loop | boolean | true | Wrap around at the ends. |
| autoPlay | number | 0 | ms between slides; 0 is off. Pauses on hover and focus. |
| aspectRatio | string | "16 / 9" | Viewport ratio. |
Keyboard interactions
| Keys | Action |
|---|---|
| ←or→ | Previous or next slide |
| Tab | Reach arrows, dots and pause |
Accessibility
- Follows the WAI carousel pattern: labelled region, slides announced as "n of m".
- Off-screen slides are inert and hidden.
- Autoplay pauses on hover and focus and has a pause button.
Motion
- Slides glide with a spring; drags settle by distance plus velocity.
- The active dot stretches into a pill.
- Instant under reduced motion.
Responsive behavior
- Measures its width, so slides always fill the viewport.
Performance
- One transformed track; slides stay mounted for instant swipes.
Notes for AI
- Keep autoplay at 4 seconds or slower.
This page as Markdown, for assistants and coding agents:
/components/carousel/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt