Components
Carousel
A scrollable carousel powered by Embla.
Carousel is built on Embla Carousel. It supports horizontal and vertical orientations, autoplay, and snap alignment.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/carousel.jsonUsage
"use client";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";
export default function Example() {
return (
<Carousel>
<CarouselContent>
<CarouselItem>Item one</CarouselItem>
<CarouselItem>Item two</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
}Examples
Default
1
2
3
Multiple items per view
1
2
3
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
useCarousel | Hook | — |
Carouseldata-slot="carousel" | <div>HTML |
|
CarouselContent | <div>HTML | — |
CarouselItemdata-slot="carousel-item" | <div>HTML | — |
CarouselPreviousdata-slot="carousel-previous" | ButtonFaber UI | — |
CarouselNextdata-slot="carousel-next" | ButtonFaber UI | — |
Changelog
- v0.3.0Carousel follows the document direction, maps arrow keys to its orientation, and leaves arrow keys alone inside inputs within a slide.patch
- v0.1.0Accessibility, correctness, and token fixes across the kit, from a full code-smell audit.minor
Last updated on