Carousel

since 1.0

A slideshow component for cycling through elements like images or cards.

Example

Variant

Size

"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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Carousel
CarouselContent
CarouselItem
CarouselNext
CarouselPrevious

Props

`<Carousel>`

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

`<CarouselNext>`

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	-
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

`<CarouselPrevious>`

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	-
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

Variants

size

defaultsmlgiconicon-smicon-lg

variant

linkdefaultdestructiveoutlinesecondaryghost

Examples

Double

Variant

Size

"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>
  )
}

Card Chart

On This Page

Example Install Components Props <Carousel><CarouselNext><CarouselPrevious>Variants Examples Double

Contribute

Carousel

since 1.0

A slideshow component for cycling through elements like images or cards.

Example

Variant

Size

"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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Carousel
CarouselContent
CarouselItem
CarouselNext
CarouselPrevious

Props

`<Carousel>`

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

`<CarouselNext>`

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	-
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

`<CarouselPrevious>`

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	-
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

Variants

size

defaultsmlgiconicon-smicon-lg

variant

linkdefaultdestructiveoutlinesecondaryghost

Examples

Double

Variant

Size

"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>
  )
}

Card Chart

On This Page

Example Install Components Props <Carousel><CarouselNext><CarouselPrevious>Variants Examples Double

Contribute