🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Carousel

A slideshow component for cycling through images, cards, or other content.

Carousels (also called sliders) display multiple pieces of content in a rotating sequence, allowing users to browse through items one at a time. They're commonly used for image galleries, product showcases, testimonials, or featured content. Carousels support both horizontal and vertical orientations, keyboard navigation, touch gestures, and automatic sliding.

Built on top of Embla Carousel with smooth animations, touch/swipe support, keyboard navigation (Arrow keys), and accessibility support including proper ARIA attributes and roles.

Example

"use client"

import { Card, CardContent } from "@strongtie/design-system/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@strongtie/design-system/carousel"

export function CarouselDefault() {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <span className="text-4xl font-semibold">{index + 1}</span>
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

Installation


npm install @strongtie/design-system

import { Carousel } from "@strongtie/design-system/carousel"

Components

This module exports the following components:

CarouselApi
Carousel
CarouselContent
CarouselItem
CarouselPrevious
CarouselNext

Props

`<Carousel>`

Prop	Type	Default
`opts`	`Partial<OptionsType>`	-
`orientation`	`horizontal` \| `vertical`	`horizontal`
`plugins`	`CreatePluginType<LoosePluginType, {}>[]`	-
`setApi`	`((api: EmblaCarouselType) => void)`	-

`<CarouselPrevious>`

Prop	Type	Default	Description
`size`	`default` \| `sm` \| `lg` \| `icon`	`icon`	The size of the button, affecting padding and font size.
`variant`	`link` \| `default` \| `secondary` \| `outline` \| `ghost` \| `destructive`	`outline`	The visual style variant of the button.

`<CarouselNext>`

Prop	Type	Default	Description
`size`	`default` \| `sm` \| `lg` \| `icon`	`icon`	The size of the button, affecting padding and font size.
`variant`	`link` \| `default` \| `secondary` \| `outline` \| `ghost` \| `destructive`	`outline`	The visual style variant of the button.

Examples

"use client"

import { Card, CardContent } from "@strongtie/design-system/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@strongtie/design-system/carousel"

export function CarouselDefault() {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <span className="text-4xl font-semibold">{index + 1}</span>
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

Double

"use client"

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@strongtie/design-system/carousel"

export function CarouselDouble() {
  return (
    <div className="mx-auto w-full max-w-md">
      <Carousel>
        <CarouselContent>
          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
            <div className="bg-muted flex aspect-square items-center justify-center rounded-lg p-6">
              <span className="text-4xl font-semibold">1</span>
            </div>
          </CarouselItem>
          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
            <div className="bg-muted flex aspect-square items-center justify-center rounded-lg p-6">
              <span className="text-4xl font-semibold">2</span>
            </div>
          </CarouselItem>
          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
            <div className="bg-muted flex aspect-square items-center justify-center rounded-lg p-6">
              <span className="text-4xl font-semibold">3</span>
            </div>
          </CarouselItem>
          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
            <div className="bg-muted flex aspect-square items-center justify-center rounded-lg p-6">
              <span className="text-4xl font-semibold">4</span>
            </div>
          </CarouselItem>
          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
            <div className="bg-muted flex aspect-square items-center justify-center rounded-lg p-6">
              <span className="text-4xl font-semibold">5</span>
            </div>
          </CarouselItem>
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

carousel
carousel-content
carousel-item
carousel-next
carousel-previous

Additional Classes

Other CSS classes used by this component:

-horizontal
-vertical
carousel
carousel-content
carousel-content-items
carousel-item
carousel-next
carousel-previous
horizontal
sr-only

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Card Checkbox

On This Page

Example Installation Components Props <Carousel><CarouselPrevious><CarouselNext>Examples Double Styling Component Slots Additional Classes Accessibility

Contribute