Header

One recipe, two bindings — rendered side by side from the same source the package ships.

React

Foundation UI

OverviewTokensv1

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>
  );
}

Svelte

Foundation UI

Overview Tokens v1

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>