Carousel
A swipeable slide region built on embla.
Overview
Slides with drag physics, snapping and optional looping (embla), navigated by
the kit's outlined IconButton arms. Arrow keys scroll while the region is
focused; slide width is just a basis-* class on each item.
$ npx morpha-ui add carouselExamples
Multiple slides per view
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add carousel. In the meantime, since this is the base shadcn component, you can
also add it directly:
npx shadcn@latest add carouselAPI Reference
Prop
Type
Accessibility
- The region is announced as a carousel (
aria-roledescription="carousel"), each slide as a "slide". - Prev/next are real buttons that disable at the ends (unless looping); arrow keys work while the region has focus.
- Avoid autoplay; if you add it (embla plugin), pause on hover/focus and respect reduced motion.