Page Shell

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

React

A centered page column. The prose width caps at a comfortable reading measure; site is wider.

page-shell.demo.tsx

import { PageShell } from "../react/index.js";

export default function PageShellDemo() {
  return (
    <div className="overflow-hidden rounded-md border border-line">
      <PageShell width="prose" className="min-h-0 py-6">
        <p className="text-ink-secondary">
          A centered page column. The <code className="font-mono">prose</code>{" "}
          width caps at a comfortable reading measure;{" "}
          <code className="font-mono">site</code> is wider.
        </p>
      </PageShell>
    </div>
  );
}

Svelte

A centered page column. The prose width caps at a comfortable reading measure; site is wider.

page-shell.demo.svelte

<script lang="ts">
  import { PageShell } from "../svelte/index.js";
</script>

<div class="overflow-hidden rounded-md border border-line">
  <PageShell width="prose" class="min-h-0 py-6">
    <p class="text-ink-secondary">
      A centered page column. The <code class="font-mono">prose</code> width
      caps at a comfortable reading measure; <code class="font-mono">site</code> is
      wider.
    </p>
  </PageShell>
</div>