Pill Tabs

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

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

Import & use

import { Nav5 } from "@/components/beste/piece/nav5";

<Nav5
  tabs={[
    "Day",
    "Week",
    "Month",
    "Year"
  ]}
  activeIndex={2}
/>

More Nav pieces

nav32

Four-tab navigation pill that expands the active tab to show its label, with a count badge on alerts.

nav11

Underline tabs that print a pill count next to the label, with the active count filled in primary.

nav4

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

nav7

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

nav6

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

nav12

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