Music
Library
Three records for the afternoon.
iOS tab bar
Floating peer tabs with icon labels, roving focus and horizontal or vertical placement.
Preview
In action
When to use
Use it for
- A small set of peer views in an app, with content managed by the parent.
- Provide panelId and optional buttonId to associate tabs with tabpanels.
Not for
- Unrelated commands; use iOS navigation bar actions.
- Hiding labels on a vertical rail without recognizable icons.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { IOSTabBar } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/ios-tab-bar.
2. Vendor the source
npx @noorddev/vlak-cli add ios-tab-bar
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/ios-tab-bar.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { IOSTabBar } from "@noorddev/vlak-react";
<IOSTabBar defaultValue="library" label="Music" items={[{ id: "library", label: "Library", panelId: "library-panel" }, { id: "search", label: "Search", panelId: "search-panel" }]} />Props
IOSTabBar
Automatically activated peer tabs. Supply panelId for the associated content.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | IOSTabBarItem[] | ||
value | string | ||
defaultValue | string | ||
onValueChange | (value: string) => void | ||
orientation | "horizontal" | "vertical" | "horizontal" | |
label | string | "App navigation" |
Also accepts Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "children">.
Keyboard
| Keys | Does |
|---|---|
| Tab, Shift+Tab | Enters or leaves the tab bar through its selected tab. |
| Arrows, Home, End | Moves and selects enabled tabs, wrapping at the ends; horizontal arrows respect text direction. |
| Enter, Space | Selects the focused tab. |
Accessibility
- Exposes tablist, tab and selected state. Disabled tabs are skipped.
- Vertical icon tabs retain their labels for assistive technology. IDs are unique per instance.
Markup
<div class="rs-ios-tab-bar" role="tablist" aria-label="Music"><button class="rs-ios-tab-bar-tab rs-ios-tab-bar-active" role="tab" aria-selected="true" tabindex="0">Library</button><button class="rs-ios-tab-bar-tab" role="tab" aria-selected="false" tabindex="-1">Search</button></div>
Classes
.rs-ios-tab-bar.rs-ios-tab-bar-vertical.rs-ios-tab-bar-symbol.rs-ios-tab-bar-vertical-label.rs-ios-tab-bar-tab.rs-ios-tab-bar-active.rs-ios-tab-bar-tab-vertical.rs-ios-tab-bar-disabled