Primitives

Tabs · Breadcrumbs

TabsUnderline for page-level navigation (1.5px accent rule under active). TabsPills for panel-level segmented toggles. Breadcrumbs is hairline-spaced.

installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json

Preview

Underline (page-level)

Pills (panel-level)

Breadcrumbs

import { TabsUnderline, TabsPills, Breadcrumbs } from "@/components/br/primitives";

<TabsUnderline
  value={tab}
  onChange={setTab}
  options={[
    { value: "overview", label: "Overview" },
    { value: "cases", label: "Case studies" },
  ]}
/>

<TabsPills value={view} onChange={setView} options={...} />

<Breadcrumbs items={[
  { label: "Atelier" },
  { label: "Components" },
  { label: "Tabs" },
]} />

Props

Prop	Type	Default	Description
value	string	—	Current selection.
onChange	(v: string) => void	—	Fires on select.
options	{ value, label }[]	—	Tab list.
Breadcrumbs.items	{ label, href? }[]	—	Trail. Last item is rendered as plain text (current page).