Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA centred looping carousel where the middle slide is full size and the slides beside it shrink as they move.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it to put one item in focus while hinting at its neighbours: featured cards, team members, plan choices.
Do not use it when every slide has to be read at once, or when slides are too wide to show a neighbour.
import { CarouselScale } from "@/components/ui/carousel-scale"<CarouselScale label="Featured" shrink={0.2} items={items} />| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
CarouselScale | items | CarouselItem[] | required | { id, label, content }. |
CarouselScale | label | string | required | Accessible name of the carousel. |
CarouselScale | shrink | number | 0.2 | How much slides one step from the centre shrink (0 to 1). |
CarouselScale | loop | boolean | true | Wrap around at the ends. |
CarouselScale | onIndexChange | (index) => void | - | Called with the snap index when the selection changes. |
CarouselScale | setApi | (api) => void | - | Receives the Embla API, for controls placed outside the carousel. |
The component ships with a Testing Library test (carousel-scale.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.