Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProThe tabbed carousel from the WAI-ARIA Authoring Practices: optional rotation button, previous and next, and a roving tablist that selects one tabpanel slide.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when accessibility conformance matters most (public sector, enterprise, procurement) or when you want a carousel that reads as tabs to a screen reader.
Do not use it when slides must be dragged or show neighbours. It shows one panel at a time with no swipe.
import { CarouselAria } from "@/components/ui/carousel-aria"<CarouselAria label="Featured stories" interval={6000} items={items} />| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
CarouselAria | items | CarouselItem[] | required | { id, label, content }. The label names the tab. |
CarouselAria | label | string | required | Accessible name of the carousel. |
CarouselAria | interval | number | - | Rotate every n ms. Unset means it never moves by itself and no rotation button is shown. |
CarouselAria | index | number | - | Controlled selected slide. |
CarouselAria | onIndexChange | (index) => void | - | Called when the selected slide changes. |
CarouselAria | showLabels | boolean | false | Show each tab's label as text instead of a dot. |
The component ships with a Testing Library test (carousel-aria.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.