Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTabs that show how much is behind each one, with the count in the accessible name, a 99+ cap for the badge only and no badge when a count is missing.
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 this to split a list by state (open, closed, drafts) where the size of each part helps people choose.
Do not use it for counts that change every second, or for navigation between pages.
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 |
|---|---|---|---|
tabs | { value, label, count?, content }[] | - | The tabs. |
value / defaultValue | string | first tab | Selected tab. |
onValueChange | (value: string) => void | - | Called when the tab changes. |
aria-label; the badge is aria-hidden, so the number is spoken once.tabpanel labelled by its tab.| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | move between tabs |
| Home / End | first / last tab |
| Tab | into the panel |
The pattern ships a Testing Library test (tabs-with-counts.test.tsx) that covers counts in names, the 99+ cap and a missing count, clicking and arrow keys.