Carousel
Data DisplayStable
Image and content carousel built on Embla. Supports horizontal/vertical orientation and programmatic API access.
Quick Import
import { Carousel } from "@cohere-ai/waypoint-ui/carousel";Live Preview
Loading Carousel...
Props
| Name | Type | Default | Description |
|---|---|---|---|
opts | EmblaOptionsType | - | Options passed to Embla carousel |
plugins | EmblaPluginType[] | - | Embla plugins |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Scroll direction |
setApi | (api: CarouselApi) => void | - | Exposes the Embla API instance |
variant (CarouselPrevious/Next) | Button variant | 'outline' | Button visual style |
size (CarouselPrevious/Next) | Button size | 'icon' | Button size |
Examples
Basic Carousel
Simple carousel with previous/next navigation
1 import { 2 Carousel, CarouselContent, CarouselItem, 3 CarouselPrevious, CarouselNext, 4 } from '@cohere-ai/waypoint-ui/carousel'; 5 6 <Carousel> 7 <CarouselContent> 8 <CarouselItem>Slide 1</CarouselItem> 9 <CarouselItem>Slide 2</CarouselItem> 10 <CarouselItem>Slide 3</CarouselItem> 11 </CarouselContent> 12 <CarouselPrevious /> 13 <CarouselNext /> 14 </Carousel>
Additional Resources
Accessibility
Keyboard Navigation
Arrow keys navigate slides when carousel is focused.
Note: Previous/Next labels provided via useUiLabels.
Found an Issue?
If you've encountered a bug or have feedback about the Carousel component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.