Carousel

A slideshow built on Embla, composed from Root, Content, Item, Previous, and Next.

Starter

For side projects and trying things out.

$0 / month

Team

Shared workspaces and unlimited projects.

$24 / month

Business

Audit logs, SSO, and priority support.

$60 / month

Enterprise

Dedicated infrastructure and a named contact.

Custom

When to use

Use when: A small set of related slides that people browse one at a time, such as product images.
Avoid when: The content matters to everyone; put it on the page instead of behind a swipe.

Installation

bunx shelf add carousel

The source lands in src/components/ui/carousel.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Carousel from "@/components/ui/carousel";

<Carousel.Root aria-label="Featured plans">
  <Carousel.Content>
    <Carousel.Item>…</Carousel.Item>
    <Carousel.Item>…</Carousel.Item>
  </Carousel.Content>
  <Carousel.Previous />
  <Carousel.Next />
</Carousel.Root>

Built on

Packages: @stylexjs/stylex, embla-carousel-react
Shelf items: Button, foundations, Icons, utils
Figma: In progress. See Designers and Figma.