A floating glass tab bar whose selection bubble stretches as it springs between tabs.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| tabs Tabs, left to right. `icon` is a render function `({ color, size, focused }) => node`; `badge` (number | string) shows a red count bubble, hidden when 0 or ''. | { key, label, icon, badge? }[] | — |
| value / defaultValue Selected tab key (controlled / uncontrolled). | string | first tab |
| onChange Called when a different tab is pressed. | (key: string) => void | — |
| showLabels Labels under the icons. Icons-only tabs get a slightly larger icon. | boolean | true |
| accent Selected icon and label colour — black on light glass, white on dark unless the kit accent is customised. | string | kit accent (glass ink) |
| scheme Force light or dark glass, e.g. 'dark' over photos. | 'light' | 'dark' | kit theme |
| trailing A separate circular glass button to the right (e.g. search), grouped with the bar so they melt together on iOS 26. `label` is its accessibility label. | { icon, onPress, label } | — |
| haptics Selection tick on tab change, light tap on the trailing button. | boolean | true |
| style Style of the outer row. The bar does not position itself — place it (e.g. absolute, bottom: insets.bottom + 8). | StyleProp<ViewStyle> | — |
| GLASS_TAB_BAR_HEIGHT Exported height of the bar (and the trailing circle) — pad your scroll content by it. | number | 62 |
Behaviour & accessibility
- Motion
- The lighter bubble springs to the selected tab, stretching as it travels and settling when it lands. The selected icon lifts, and buttons spring down while pressed.
- Reduced motion
- The bubble jumps to the new tab without stretching, icons switch without a spring and press springs are off.
- Haptics
- A selection tick when the tab changes and a light tap on the trailing button.
- Screen readers
- The bar is a tablist; each tab is a tab with its selected state, and the badge count is read after the label.
- Platforms
- Real Liquid Glass on iOS 26, where the trailing button melts into the bar. Blur everywhere else.
Source
Did you like the content?