Vertical Tabs

Sidebar-style stack of icon + label rows where the active row gets a muted fill and bolder text.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Nav7 } from "@/components/beste/piece/nav7";

<Nav7
  tabs={[
    {
      "label": "Notifications",
      "icon": "bell"
    },
    {
      "label": "Billing",
      "icon": "card"
    },
    {
      "label": "Security",
      "icon": "shield"
    },
    {
      "label": "Preferences",
      "icon": "settings"
    }
  ]}
  activeIndex={1}
/>