Pill header

The links in a pill in the middle with a sliding highlight, a GitHub star count, the theme, sign in and the main action.

$ pnpm dlx shadcn@latest add @dashral/pill-header

When to use

A compact site header: the links in a pill with a sliding highlight, a GitHub star count and the theme.
Developer tools, open-source projects and docs sites with a handful of top-level pages.

When not to use

Sites whose menus hold several pages each: Website header has menus with descriptions.
Inside an app: Dashboard header.

Usage

Pill header with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { PillHeader } from "@/components/dashral/blocks/pill-header"
2
3<PillHeader
4  brand={{ name: "Acme", href: "/" }}
5  links={[
6    { title: "Docs", href: "/docs" },
7    { title: "Blog", href: "/blog" },
8    { title: "Pricing", href: "/pricing" },
9  ]}
10  current={section}
11  github={{ href: "https://github.com/acme/acme", stars: starCount }}
12  cta={{ label: "Get started", href: "/docs" }}
13  onToggleTheme={() => setTheme(theme === "dark" ? "light" : "dark")}
14/>

API reference

PillHeader

A website header with the links in a pill in the middle — a highlight slides to the page you're on — a GitHub star count, the theme, and sign in beside the main action. On phones the links move into a sheet. The theme button toggles the dark class on <html>; pass onToggleTheme to use your own (next-themes, say). The brand, links, GitHub repository and actions come from props; the page you're on is controllable, with onNavigate.

Prop	Type	Default
`brand`	`{ name: string; href: string; logo?: React.ReactNode }`	`sample`
`links`	`PillLink[]`	`sample`
`current`	`string` The link you're on, by title (the header keeps it without it).	—
`onNavigate`	`(title: string) => void` Called with the link's title; links to "#" stay on the page.	—
`github`	`{ href: string; stars: number } \| null` The star button; null hides it.	`sample`
`signIn`	`BlockAction \| null` null hides it.	`sample`
`cta`	`BlockAction`	`sample`
`onToggleTheme`	`() => void`	—

type PillLink

A link in the pill; badge is a short word beside it ("New").

Prop	Type	Default
`title`	`string`	—
`href`	`string`	—
`badge`	`string`	—

type BlockAction

A button: a link with href, or onClick.

Prop	Type	Default
`label`	`string`	—
`href`	`string`	—
`onClick`	`() => void`	—