Carousel
Data Display
Media
Image and content carousel with auto-play, navigation arrows, and dot indicators.
Preview
Image carousel with auto-play and navigation
Build faster
Modern components for modern teams
Design with intent
Accessible, consistent, and beautiful
Ship with confidence
Production-ready from day one
Scale your product
Built for AI-powered SaaS applications
Custom Content
Carousel with custom React components instead of images
Welcome
Slide with custom content
Features
Auto-play, navigation, and more
Get Started
Easy to integrate and customize
Without Controls
Hide navigation arrows and/or dot indicators
Build faster
Modern components for modern teams
Design with intent
Accessible, consistent, and beautiful
Props
Carousel component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | CarouselItem[] | — | Array of slides to display (required) |
autoPlay | boolean | false | Enable automatic slide transitions |
autoPlayInterval | number | 5000 | Interval in milliseconds between slides |
showDots | boolean | true | Show dot indicators |
showArrows | boolean | true | Show navigation arrows |
className | string | — | Additional CSS classes |
CarouselItem Type
interface CarouselItem { image?: string // Image URL for the slide title?: string // Title overlay text description?: string // Description overlay text content?: React.ReactNode // Custom content (alternative to image)}Usage
Import and implementation example
import { Carousel, type CarouselItem } from '@/components/ui/carousel'
export default function Example() { // Image slides const slides: CarouselItem[] = [ { image: '/image1.jpg', title: 'Slide 1', description: 'First slide description' }, { image: '/image2.jpg', title: 'Slide 2', description: 'Second slide description' } ]
return ( <> {/* Basic carousel */} <Carousel items={slides} />
{/* With auto-play */} <Carousel items={slides} autoPlay autoPlayInterval={3000} />
{/* Custom content */} <Carousel items={[ { content: <div>Custom React content</div> }, { content: <MyComponent /> } ]} />
{/* Without controls */} <Carousel items={slides} showArrows={false} showDots={false} /> </> )}Features
Built-in functionality
- Image slides: Title and description overlays
- Custom content: Any React components as slides
- Auto-play: Configurable interval timing
- Navigation arrows: Show on hover
- Dot indicators: Click to jump to slide
- Smooth transitions: Automatic looping
- Pause on hover: Auto-play pauses when hovering
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="region" with aria-roledescription="carousel"Slides use aria-hidden for inactive itemsNavigation buttons have aria-labelKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Focus navigation controls |
| Enter/Space | Activate navigation buttons |
| Arrow Left/Right | Navigate slides (when focused) |
Notes
- Auto-play pauses on hover and focus
- Consider reduced motion preferences
- Provide alternative navigation for keyboard users
- Image slides should have meaningful alt text