Components
Tabs
An underline tab set, with counts that cannot reflow their label.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/tabs.jsonCounts live beside the label
Not inside it. A number changing from 9 to 10 would otherwise widen the tab and shift every tab after it — which is exactly what happens on a screen where the counts update live.
Active is border/active under text/primary; the rest sit muted over the
hairline, so the strip reads as one rule with one segment lit.
This was previously buried inside messages.tsx. It is a primitive now, and
messages re-exports it so existing imports keep working.
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | (string | { label, count })[] | — | Strings for plain tabs, objects when a count is wanted. |
| active | string | — | The active label. Controlled. |
| onChange | (t: string) => void | — | Fires with the label. |