Patterns

Topbar

Sticky 64px (56px in C) glass header. Brand + nav with 1.5px accent underline + search trigger + bell + sm-accent avatar.

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

Preview

import { Topbar } from "@/components/br/topbar";

<Topbar
  brand="Atelier"
  links={[
    { label: "Foundations", href: "#foundations", active: true },
    { label: "Components", href: "#components" },
    { label: "Patterns", href: "#patterns" },
  ]}
  onSearchClick={() => setCmdOpen(true)}
/>

Props

Prop	Type	Default	Description
brand	ReactNode	"Atelier"	Brand label next to the logo.
links	TopbarLink[]	—	{ label, href, active?, onClick? }[]
onSearchClick	() => void	—	Fires when the Search ⌘K pill is clicked.