Carousel
Data Display
Media
Image and content carousel with auto-play, navigation arrows, and dot indicators.
Preview
Image carousel with auto-play and navigation
Mountain Adventure
Explore the breathtaking peaks and valleys
Beach Paradise
Relax on pristine shores under the sun
Forest Retreat
Find peace in the heart of nature
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
Mountain Adventure
Explore the breathtaking peaks and valleys
Beach Paradise
Relax on pristine shores under the sun
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