Carousel
The React Carousel component lets users scroll through a list of items, such as images, cards, or testimonials. It shows one or more items at a time and allows users to move between them.
It helps save space while still displaying multiple pieces of content. For example, you can use a carousel for product images, customer reviews, or featured content.
Built on top of Embla Carousel and styled with Tailwind CSS. It supports smooth scrolling and keyboard navigation, and it works well across different screen sizes.
1
2
3
4
5
Installation
Install the component using the Tailgrids CLI.
npx @tailgrids/cli add carouselAnatomy
Import the components and wrap your items.
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious
} from "@/components/carousel";
export const CarouselExample = () => (
<Carousel>
<CarouselContent>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);Examples
Default Carousel
1
2
3
4
5
Testimonials
A single-item carousel for customer reviews and feedback.
“This carousel component is incredibly smooth. I love how easy it was to integrate with our design system.”
Jane Doe
Lead Designer at TechCo
“Vertical orientation was exactly what we needed for our sidebar news feed. Performance is top-notch.”
John Smith
Frontend Engineer at StartupX
“The API accessibility is fantastic. We were able to build complex custom navigation in minutes.”
Sarah Brown
Product Manager at WebDev
Vertical Orientation
Set the orientation="vertical" prop to create a vertical scrolling carousel.
API Control & Events
Use the setApi prop to get access to the Embla Carousel instance for custom controls or events.
Plugin & Options
Use the opts prop to pass configuration options to the carousel and plugins prop to add plugins.
1
2
3
4
5
API Reference
Carousel
The root component that provides context and manages the Embla instance.
| Prop | Type | Default | Description |
|---|---|---|---|
opts | CarouselOptions | - | Options for the Embla Carousel instance. |
plugins | CarouselPlugin[] | - | Plugins for the Embla Carousel instance. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the carousel. |
setApi | (api: CarouselApi) => void | - | Callback to receive the Embla Carousel API. |
className | string | - | Additional CSS classes for the root container. |
CarouselContent
The wrapper for the carousel items.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes for the slides wrapper. |
children | React.ReactNode | The CarouselItem components. |
CarouselItem
A single slide within the carousel.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes for the slide. |
children | React.ReactNode | The content of the slide. |
CarouselPrevious / CarouselNext
Navigation buttons for the carousel. They accept all props of the Button component.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'danger' | 'success' | 'ghost' | 'ghost' | The visual variant of the button. |
appearance | 'outline' | 'fill' | 'outline' | The visual appearance of the button. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'sm' | The size of the navigation button. |
className | string | - | Additional CSS classes for the button. |
See the Embla Cacrousel Guides for more information.
Accessibility
- Keyboard support: Users can navigate between slides using
Arrowkeys. - Screen reader support: Navigation buttons include hidden text like “Previous slide” and “Next slide” so screen readers can announce them clearly.
- ARIA roles: The carousel uses roles like
region(carousel) andgroup(slide) to help screen readers understand the structure. - Slide structure: Each slide is treated as a separate group so users can identify slide boundaries.
- Navigation states: Navigation buttons are
disabledwhen there are no more slides to scroll. - Accessibility plugins: You can use the Embla accessibility plugin to enhance support for screen readers and interactions.
