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.

Prop	Type	Default
`hideFrom` Hide 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`	`—`
`asChild` Style the single child element (a router link holding the icon and label) instead of rendering an <a>.	`boolean`	`—`
`icon`	`ReactNode`	`—`