Enclosed Tabs

Classic folder-style tabs that sit on a rail, with the active tab bordered and notched into the panel.

Import & use

import { Nav6 } from "@/components/beste/piece/nav6";

<Nav6
  tabs={[
    "General",
    "Billing",
    "Team",
    "API"
  ]}
  activeIndex={0}
/>

More Nav pieces

Horizontal tabs with a thin bottom rail and a primary underline under the active label.

Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.

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

app

page.tsx

layout.tsx

components

tailwind.config.ts

Nested file explorer with amber folder icons, chevrons, and a primary fill under the active file.

On this page

Docs-style on-this-page list with left borders and a primary active rail on the current section.

Rounded segmented tabs riding a muted track, with a raised card sliding under the active label.