Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when slides come from a request: skeleton slides of the right size while loading, a clear error with a Retry button, an empty message, and the real carousel once data arrives, each state announced.
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 any carousel fed by an API, so people never see a blank gap, a spinner with no end or a broken row.
Do not use it for static data. The extra states add code you do not need.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
state | "loading" | "error" | "empty" |
items | CarouselItem[] | [] | The slides, used when ready. |
label | string | - | Accessible name of the carousel. |
onRetry | () => void | - | Called by Retry in the error state. |
skeletonCount | number | 3 | How many skeleton cards to show while loading. |
The pattern ships with a Testing Library test (async-loading-skeleton-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.