Carousel
An accessible Embla-powered slider with keyboard support, optional 3D tilt, and dot pagination.
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
CarouselDots,
} from "@sigil-ui/components";
<Carousel className="w-full max-w-md">
<CarouselContent>
<CarouselItem>...</CarouselItem>
<CarouselItem>...</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
<CarouselDots />
</Carousel>
<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
| 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. |
| Prop | Type | Default | Description |
|---|
placement | "inside" | "outside" | "inside" | Where the button sits relative to the slide rail. |
← / → move horizontal carousels.↑ / ↓ move vertical carousels.
| 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 |