Preview

Import

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
  CarouselDots,
} from "@sigil-ui/components";

Usage

<Carousel className="w-full max-w-md mx-auto">
    <CarouselContent>
      <CarouselItem>
        <div className="flex aspect-[16/9] items-center justify-center rounded-[var(--s-radius-md,8px)] bg-[var(--s-surface)] border border-[style:var(--s-border-style,solid)] border-[color:var(--s-border)] text-[var(--s-text)]">
          <div className="text-center">
            <div className="font-[family-name:var(--s-font-mono)] text-[10px] uppercase tracking-[0.12em] text-[var(--s-text-muted)] mb-2">Slide 01</div>
            <div className="font-[family-name:var(--s-font-display)] text-3xl font-bold tracking-tight">Sigil tokens</div>
          </div>
        </div>
      </CarouselItem>
      <CarouselItem>
        <div className="flex aspect-[16/9] items-center justify-center rounded-[var(--s-radius-md,8px)] bg-[var(--s-surface-elevated,var(--s-surface))] border border-[style:var(--s-border-style,solid)] border-[color:var(--s-border)] text-[var(--s-text)]">
          <div className="text-center">
            <div className="font-[family-name:var(--s-font-mono)] text-[10px] uppercase tracking-[0.12em] text-[var(--s-text-muted)] mb-2">Slide 02</div>
            <div className="font-[family-name:var(--s-font-display)] text-3xl font-bold tracking-tight">46 presets</div>
          </div>
        </div>
      </CarouselItem>
      <CarouselItem>
        <div className="flex aspect-[16/9] items-center justify-center rounded-[var(--s-radius-md,8px)] bg-[var(--s-primary)]/10 border border-[style:var(--s-border-style,solid)] border-[color:var(--s-primary)] text-[var(--s-primary)]">
          <div className="text-center">
            <div className="font-[family-name:var(--s-font-mono)] text-[10px] uppercase tracking-[0.12em] mb-2">Slide 03</div>
            <div className="font-[family-name:var(--s-font-display)] text-3xl font-bold tracking-tight">350+ components</div>
          </div>
        </div>
      </CarouselItem>
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
    <CarouselDots />
  </Carousel>

Sub-components

<CarouselContent> — overflow viewport
<CarouselItem> — individual slide (full-basis by default)
<CarouselPrevious> / <CarouselNext> — nav buttons (rendered inside the slide by default)
<CarouselDots> — pagination dots, hidden when there's only one slide

Props

Carousel

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Slide axis.
`opts`	`EmblaOptionsType`	—	Options forwarded to `useEmblaCarousel`.
`tilt`	`boolean`	`false`	Enables 3D tilt perspective on slides.

CarouselPrevious / CarouselNext

Prop	Type	Default	Description
`placement`	`"inside" \| "outside"`	`"inside"`	Where the button sits relative to the slide rail.

Keyboard

← / → move horizontal carousels.
↑ / ↓ move vertical carousels.

Token integration

CSS Variable	Purpose
`--s-card-radius` / `--s-radius-md`	Viewport corner radius
`--s-surface`	Nav button background
`--s-surface-elevated`	Nav button hover background
`--s-border` / `--s-border-style`	Nav button border
`--s-shadow-md`	Nav button elevation
`--s-text` / `--s-text-muted`	Nav button text colors
`--s-primary`	Active dot color, nav hover text
`--s-radius-full`	Nav buttons + dots
`--s-duration-fast` / `--s-duration-normal`	Transitions
`--s-focus-ring-color` / `--s-focus-ring-width`	Focus ring

On this page