Components
Tab Bar
Phone navigation fixed to the bottom of the screen. Works with any router.
Month
Import
import { TabBar, TabBarItem } from '@rinzai/zen';API reference
<TabBar>
Phone navigation: a glass bar fixed to the bottom, clear of the home indicator, hidden from hideFrom up (default md). Fill it with TabBarItems. Its height is kept in --zen-tab-bar-height on its parent (0px while hidden): a PlayerBar beside it sits on it, and the page can pad its end by it. Inside a rounded frame, round the bar to match (className, e.g. rounded-b-[15px]): with GPU compositing, Chrome doesn't clip a blurred backdrop to an ancestor's rounded corners, only to the element's own.
| Prop | Type | Default |
|---|---|---|
hideFromHide the bar from this breakpoint up (false: always show). | "lg" | "md" | "sm" | false | md |
<TabBarItem>
One destination: an icon over a label. active marks the current page; with asChild, the styles go onto your own link (e.g. a router's NavLink, which sets aria-current itself).
| Prop | Type | Default |
|---|---|---|
active | boolean | — |
asChildStyle the single child element (a router link holding the label) instead of rendering an <a>; | boolean | — |
icon | ReactNode | — |