Page Shell

A minimal full-height layout wrapper that composes Navbar, main content, and Footer into a flex column.

Preview

Navbar

Main Content Area

Footer

Installation

npx shadcn@latest add @shadszn/page-shell

Files Installed

page-shell/page-shell.tsx -- PageShell layout component

Key Features

Full viewport height with flex column layout
Navbar slot at the top
Main content area with flex-1 to fill remaining space
Footer slot at the bottom (always pushed to bottom)

Usage

import { PageShell } from "@/components/blocks/page-shell"
import { Navbar } from "@/components/blocks/navbar"
import { Footer } from "@/components/blocks/footer"

export default function Layout({ children }) {
  return (
    <PageShell
      navbar={
        <Navbar
          logo={<span className="font-bold">MyApp</span>}
          links={[
            { href: "/", label: "Home", active: true },
            { href: "/docs", label: "Docs" },
          ]}
        />
      }
      footer={
        <Footer
          copyright="2025 MyApp Inc."
          links={[{ label: "Privacy", href: "/privacy" }]}
        />
      }
    >
      {children}
    </PageShell>
  )
}

Props

Prop	Type	Default	Description
navbar	ReactNode	---	Navbar element rendered at the top.
footer	ReactNode	---	Footer element rendered at the bottom.
children*	ReactNode	---	Main content rendered in the flex-1 area.
className	string	---	Additional CSS classes for the main element.