Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when a carousel holds many links or buttons: a "Skip carousel" link that appears on focus before it, and a labelled landmark after it that takes focus, so keyboard users are not forced through every slide.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for carousels of cards that each contain links or buttons, on pages where the content after the carousel matters, such as a feed or a shop.
Do not use it for a carousel of images with no interactive content: nothing to skip. Skip links also do not replace a short Tab path.
It composes Carousel Peek, which the CLI installs for you.
import { SkipLinkCarousel } from "@/components/skip-link-carousel"<SkipLinkCarousel label="Best sellers" items={items}>
<ProductGrid />
</SkipLinkCarousel>| Prop | Type | Default | Description |
|---|---|---|---|
items | CarouselItem[] | - | The slides: { id, label, content }. |
label | string | - | Accessible name of the carousel. |
children | ReactNode | - | The content that follows the carousel; it sits inside the landmark that takes focus. |
skipLabel | string | Skip carousel | Text of the skip link. |
The pattern ships with a Testing Library test (skip-link-carousel.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.