Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when a mobile dashboard leads with a few key numbers: a scroll-snap row of KPI cards with the change written in words and a Refresh button that marks the row busy and says when it has updated.
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 at the top of a phone-sized dashboard or report where four to six headline numbers should be swiped through and kept fresh.
Do not use it on a wide dashboard where all the numbers fit on one row. Show them side by side.
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 |
|---|---|---|---|
kpis | Kpi[] | - | Each has an id, name, value text, delta (percent change) and sparkline (numbers). |
label | string | - | Accessible name of the carousel. |
onRefresh | () => Promise<void> | - | Called by Refresh. The row is aria-busy until it settles. |
The pattern ships with a Testing Library test (kpi-cards-refresh-snap.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.