Page Shell

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

Preview

MyApp

HomeDocsBlog

children (flex-1)

PrivacyTerms

navbar

children

footer

min-h-screen flex-col

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/page-shell"
import { Navbar, NavbarBrand } from "@/components/navbar"
import { Footer } from "@/components/footer"

export default function Layout({ children }) {
  return (
    <PageShell
      navbar={
        <Navbar
          brand={<NavbarBrand>MyApp</NavbarBrand>}
          links={[
            { label: "Home", href: "/", active: true },
            { label: "Docs", href: "/docs" },
            { label: "Blog", href: "/blog" },
          ]}
        />
      }
      footer={
        <Footer
          copyright="© 2025 MyApp Inc."
          links={[
            { label: "Privacy", href: "/privacy" },
            { label: "Terms", href: "/terms" },
          ]}
        />
      }
    >
      {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.