Layout

PageHeader

The top of a page: where you are, what this is, and the main actions.

import { PageHeader } from "@flinbu/seed";

Breadcrumbs, meta, actions and tabs

Collection

Color

Publishedv2.4

446 tokens in two modes. Semantic tokens switch between Light and Dark; primitives are raw ingredients.

import { Badge, Breadcrumb, Button, PageHeader, Tabs, TabsList, TabsTrigger } from "@flinbu/seed";
import { Download, Plus } from "lucide-react";

<div className="w-full">
  <PageHeader
    breadcrumbs={<Breadcrumb items={[{ label: "Acme DS", href: "#" }, { label: "Tokens", href: "#" }, { label: "Color" }]} />}
    eyebrow="Collection" title="Color" meta={<><Badge variant="success" dot>Published</Badge><Badge appearance="outline">v2.4</Badge></>}
    description="446 tokens in two modes. Semantic tokens switch between Light and Dark; primitives are raw ingredients."
    actions={<><Button variant="secondary" leftIcon={<Download />}>Export</Button><Button leftIcon={<Plus />}>New token</Button></>}
    tabs={<Tabs defaultValue="all"><TabsList aria-label="Token views"><TabsTrigger value="all">All</TabsTrigger><TabsTrigger value="sem">Semantic</TabsTrigger><TabsTrigger value="prim">Primitives</TabsTrigger></TabsList></Tabs>} />
</div>

Use it for

Every screen in an app.

Props

Prop	Type	Default	Description
`title`	`ReactNode`	–	A noun.
`eyebrow / description / meta`	`ReactNode`	–	Mono label, one or two sentences, Badges.
`actions`	`ReactNode`	–	At most one primary Button.
`breadcrumbs / back`	`ReactNode / { label, href, onClick }`	–	Where you came from.
`tabs`	`ReactNode`	–	A TabsList under it.
`display`	`boolean`	–	Fenly Serif title, for hero screens.

Accessibility

Renders the page's one h1.