Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA drag-and-fling row of cards that glides with momentum and stops anywhere, with edge fades, scroll buttons and a progress bar.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a shelf of cards, chips or media of uneven width, where there are no pages: collections, categories, related items.
Do not use it when each slide is a unit that must snap into place, such as a hero. Use the paged carousels.
import { CarouselFreeScroll } from "@/components/ui/carousel-free-scroll"<CarouselFreeScroll
label="Collections"
slideClassName="basis-48"
items={items}
/>| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
CarouselFreeScroll | items | CarouselItem[] | required | { id, label, content }. |
CarouselFreeScroll | label | string | required | Accessible name of the carousel. |
CarouselFreeScroll | edgeFade | boolean | true | Fade the edges where more content is hidden. |
CarouselFreeScroll | slideClassName | string | "basis-44" | Width classes for each slide. |
CarouselFreeScroll | onIndexChange | (index) => void | - | Called with the snap index when the selection changes. |
CarouselFreeScroll | setApi | (api) => void | - | Receives the Embla API, for controls placed outside the carousel. |
The component ships with a Testing Library test (carousel-free-scroll.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.