SnowballSH Foundation UI

Page Shell

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

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

Page Shell props for React
PropTypeDefaultDescription
width"prose" | "site"siteContent column width.

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

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