Mobile tab bar with labeled icons, a raised center create button, and a rose unread counter badge.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Nav19 } from "@/components/beste/piece/nav19";
<Nav19
tabs={[
{
"label": "Home",
"icon": "home",
"active": true
},
{
"label": "Search",
"icon": "search"
},
{
"label": "",
"icon": "plus"
},
{
"label": "Inbox",
"icon": "bell",
"badge": 3
},
{
"label": "Profile",
"icon": "user"
}
]}
/>Web-app bottom bar with five labeled icon tabs and a primary indicator above the active one.
Sidebar-style stack of icon + label rows where the active row gets a muted fill and bolder text.
Horizontal tabs with a thin bottom rail and a primary underline under the active label.
Four-tab navigation pill that expands the active tab to show its label, with a count badge on alerts.
Grouped sidebar menu with section labels, icon rows, optional counters, and a muted active state.
Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.