KQ-512 · TAB/BAR
Tab Bar
A bottom tab bar built for a thumb. The chosen tab fills its outline glyph — a solid path cross-fading over the stroked one, a tween because weight and colour have no physics — lifts its label 2px on snap, and the indicator pill travels under it through a shared layoutId rather than blinking out and in. A badge bumps on recoil when its number changes, and the bar is a real tablist: a roving tabindex, Left and Right around the bar, Home and End to the ends.
KQ-512 · TAB/BAR
Coldbrook
8,412.60
Balance holds after the weekend transfer.
- Fieldline deposit+ 1,240.00
- Card · ending 4417− 86.20
- Basinworks rent− 950.00
Tab home · inbox 3
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/tab-bar
Props
- tabs
- { id: string; label: string; icon: "home" | "search" | "inbox" | "wallet" | "me"; badge?: number }[]
- default —
- Up to five tabs; the icons are built in and a badge shows when its count is above zero.
- value / defaultValue
- string
- default —
- Controlled or initial active tab id.
- onValueChange
- (id: string) => void
- default —
- Fires on tap and whenever the keyboard moves the selection.
- aria-label
- string
- default "Primary"
- Accessible name for the tablist.
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | { id: string; label: string; icon: "home" | "search" | "inbox" | "wallet" | "me"; badge?: number }[] | — | Up to five tabs; the icons are built in and a badge shows when its count is above zero. |
| value / defaultValue | string | — | Controlled or initial active tab id. |
| onValueChange | (id: string) => void | — | Fires on tap and whenever the keyboard moves the selection. |
| aria-label | string | "Primary" | Accessible name for the tablist. |