Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Nav12 } from "@/components/beste/piece/nav12";
<Nav12
tabs={[
{
"label": "Preview",
"icon": "preview"
},
{
"label": "Code",
"icon": "code"
},
{
"label": "Readme",
"icon": "docs"
},
{
"label": "Settings",
"icon": "settings"
}
]}
activeIndex={0}
/>Sidebar-style stack of icon + label rows where the active row gets a muted fill and bolder text.
Classic folder-style tabs that sit on a rail, with the active tab bordered and notched into the panel.
Breadcrumb where each crumb wears a home or folder icon chip and the final crumb has a muted fill.
Mobile tab bar with labeled icons, a raised center create button, and a rose unread counter badge.
Horizontal tabs with a thin bottom rail and a primary underline under the active label.
Rounded segmented tabs riding a muted track, with a raised card sliding under the active label.