build69
Sign inGet API key
build69  /  Components  /  Media & Files  /  Carousel

Carousel

v1.0.8Updated 27 Aug 2026

Embla-powered carousel for image galleries, content slides, and onboarding. Horizontal or vertical, optional autoplay, thumbnails, and one-at-a-time scroll.

View source← Back to catalog

Preview

Live · 10 stories
DefaultOpen ↗
▸Why this is recommendedcarouselemblaslidergallery+2

The default, out-of-the-box Carousel.

Recommended for+14
  • ✓Image galleries
  • ✓Onboarding step slides
  • ✓Product feature carousels
  • ✓Marketing testimonials
Tags+6
carouselemblaslidergalleryslidesdefault
Features+4
  • Embla-react engine
  • Horizontal / vertical orientation
  • Autoplay plugin support
  • Prev / Next controls
  • Thumbnail companion carousel
  • i18n labels prop (CarouselLabels — every built-in string overridable)
Not recommended for−2
  • ✕Tabular data (use DataTable)
  • ✕Long-form content (use vertical scroll)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Carousel" })

Usage

import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/media/carousel';

<Carousel opts={{ loop: true }}>
  <CarouselContent>
    {slides.map(s => <CarouselItem key={s.id}>{s.node}</CarouselItem>)}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
orientation

Scroll direction

'horizontal' | 'vertical'—
opts

Embla options (loop, align, etc.)

CarouselOptions—
plugins

Embla plugins (autoplay, etc.)

CarouselPlugin—
setApi

Receive the Embla API instance

function—
labels

Override built-in UI strings (region aria-label, prev/next sr-only text, slide-position template) for i18n

Partial<CarouselLabels>—

Related

Platform docsAll componentsSource files