Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA responsive carousel with one slide and a peek of the next on phones, two or three per view on wider containers, paged dots and a "Showing 1-2 of 6" readout.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for cards in a content area that must adapt to its container: destinations, articles, products.
Do not use it for a single hero slide or when you need every item visible at once. A grid shows all of them.
import { CarouselPeek } from "@/components/ui/carousel-peek"<CarouselPeek
label="Destinations"
slideClassName="basis-[85%] @md:basis-[46%] @2xl:basis-[31%]"
items={items}
/>| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
CarouselPeek | items | CarouselItem[] | required | { id, label, content }. |
CarouselPeek | label | string | required | Accessible name of the carousel. |
CarouselPeek | slideClassName | string | "basis-[85%] @md:basis-[46%] @2xl:basis-[31%]" | Slide width per container size, in container-query classes. |
CarouselPeek | onIndexChange | (index) => void | - | Called with the snap index when the selection changes. |
CarouselPeek | setApi | (api) => void | - | Receives the Embla API, for controls placed outside the carousel. |
The component ships with a Testing Library test (carousel-peek.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes in tests.