Public Shell
Signed-out marketing shell with a top nav, sign-in actions, and a footer around a content slot.
Page content goes here
Marketing and landing page content renders in the shell's content slot.
Installation
npx shadcn@latest add https://ui.uptoolkit.com/r/public-shell.jsonUsage
Header with nav and sign-in/sign-up links, a children content slot, and a link-column footer.
Marketing and landing pages install this once and swap children per route.
import { PublicShell } from "@/components/public-shell";
<PublicShell
nav={[
{ label: "Product", href: "/product", active: true },
{ label: "Pricing", href: "/pricing" },
]}
signInHref="/login"
signUpHref="/signup"
footerSections={[
{ heading: "Product", links: [{ label: "Overview", href: "/product" }] },
]}
>
{children}
</PublicShell>;Routing
Nav items, the brand link, and footer links are plain anchors, not a router Link. Swap the <a>
elements for your router's link component if you need client-side navigation, and drive active
from the current route.
Footer
footerSections renders as a responsive link grid; omit it to render just the footerNote line.
footerNote defaults to a generic rights line built from brand.name — pass your own to include a
year or legal entity name.