Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when instructions have timed steps: a step-by-step carousel where a step can start a countdown that keeps running while you move on, and a polite message says when each one finishes.
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 recipes, lab protocols and set-up guides where some steps wait (simmer, cure, upload) while the person does the next one.
Do not use it for a long list of steps without waiting, where a numbered list is simpler and prints well.
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 |
|---|---|---|---|
steps | RecipeStep[] | - | Each has an id, title, text and optional seconds for its timer. |
label | string | - | Accessible name of the carousel. |
The pattern ships with a Testing Library test (recipe-steps-timers.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.