Header

Pick a framework. Both use the same recipe, so the styling matches exactly.

Foundation UI

OverviewTokensv1

Header props for React
Prop	Type	Default	Description
children	content		Brand and navigation, laid out edge to edge.

Also takes className and children. Anything else passes through to the header.

header.demo.tsx

import { Badge, Header, ThemeToggle } from "../react/index.js";

export default function HeaderDemo() {
  return (
    <div className="overflow-hidden rounded-md border border-line">
      <Header className="static">
        <span className="font-display font-semibold">Foundation UI</span>
        <div className="flex items-center gap-4 text-sm text-ink-secondary">
          <span>Overview</span>
          <span>Tokens</span>
          <Badge tone="aurora">v1</Badge>
          <ThemeToggle />
        </div>
      </Header>
      <div className="h-16 bg-surface" />
    </div>
  );
}

Foundation UI

Overview Tokens v1

Header props for Svelte
Prop	Type	Default	Description
children	content		Brand and navigation, laid out edge to edge.

Also takes class and snippet children. Anything else passes through to the header.

header.demo.svelte

<script lang="ts">
  import { Badge, Header, ThemeToggle } from "../svelte/index.js";
</script>

<div class="overflow-hidden rounded-md border border-line">
  <Header class="static">
    <span class="font-display font-semibold">Foundation UI</span>
    <div class="flex items-center gap-4 text-sm text-ink-secondary">
      <span>Overview</span>
      <span>Tokens</span>
      <Badge tone="aurora">v1</Badge>
      <ThemeToggle />
    </div>
  </Header>
  <div class="h-16 bg-surface"></div>
</div>