Page Tabs

Installation

pnpm dlx shadcn@latest add @ffg/page-tabs

Usage

import { useState } from "react";
import { PageTabs } from "@/components/ui/page-tabs";

const [active, setActive] = useState("overview");

<PageTabs
  tabs={[
    { id: "overview", label: "Overview" },
    { id: "areas", label: "Your impact portfolio" },
    { id: "history", label: "Transactions" },
  ]}
  active={active}
  onChange={setActive}
/>

A controlled page-level navigation bar. Each tab is a { id, label } pair; the active tab is driven by the active prop and reported through onChange.

• Tablist — shown at sm and up: an underlined row with a strong-divider base border. The inactive tabs use text-muted-foreground; the active tab uses text-foreground with a matching underline.
• Select — below sm the tablist collapses into a native <select> with a caret affordance, so the same navigation works on narrow viewports.

Dark mode: the muted/foreground text pair and the active underline map to semantic tokens, so the bar inverts correctly. The active indicator uses border-foreground rather than a fixed brand color, keeping the highlight legible against either background.