App Shell

Name: Layro Pro
Price: 149 USD

A sidebar with your workspace, nav (with sub-pages) and projects, a top bar for the page's own header and your account, and a page that is the only thing that scrolls. It collapses to an icon rail with ⌘B, becomes a drawer under 900px of its own width, and ⌘K lists every page without a second list to maintain.

Navigation & layoutBlockProLifetime access580 lines · one file

The decision inside it

Every page, three ways in

The sidebar, the rail's tooltips and ⌘K all read the same nav and sections, so a page added once is findable everywhere. A parent opens itself when one of its children is the current page, so the active row is never hidden in a closed group.

When to use it

Use App Shell for the frame around every screen of an app: workspace switcher, nav with sub-pages, project lists, a top bar for the page's header and the account menu, ⌘K search and ⌘B collapse. Use Sidebar on its own when you already have a layout and only need the navigation.

Installation

How you get it

Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.

Use Layro's App Shell for this.
Install it: npx shadcn@latest add @layro/app-shell
(the @layro registry is set up in components.json, with LAYRO_KEY in .env.local)
Import it from @/components/ui/app-shell.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.

For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above. Pro components install through the @layro registry with your CLI token: see the Namespaced tab.

Usage

app/(app)/layout.tsx

"use client";

import { usePathname, useRouter } from "next/navigation";
import * as React from "react";
import { FileText, Home, Inbox, Users } from "lucide-react";
import { AppShell } from "@/components/ui/app-shell";

export default function AppLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  return (
    <div className="h-dvh">
      <AppShell
        workspace={{ name: "Madgixs", meta: "Team plan" }}
        nav={[
          { label: "Overview", href: "/", icon: <Home /> },
          { label: "Inbox", href: "/inbox", icon: <Inbox />, badge: 3 },
          {
            label: "Documents",
            icon: <FileText />,
            children: [
              { label: "All documents", href: "/documents" },
              { label: "Drafts", href: "/documents/drafts" },
            ],
          },
          { label: "Members", href: "/members", icon: <Users /> },
        ]}
        sections={[{ title: "Projects", items: [{ label: "Fenwick Row lease", href: "/projects/fenwick" }] }]}
        user={{ name: "Michael Carter", email: "michael@madgixs.com" }}
        header={<span className="text-[13.5px] font-medium">Madgixs</span>}
        activeHref={pathname}
        onNavigate={(href) => router.push(href)}
      >
        {children}
      </AppShell>
    </div>
  );
}

API reference

“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.

Props

Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.

Prop	Type	Notes
`variant`	`"inset" \| "flat"`	"inset" (default) floats the page as a card; "flat" runs it edge to edge.
`workspace`required	`{ name: string; logo?: string; icon?: React.ReactNode; meta?: string }`	The workspace you are in. Shown in the header, and as its mark in the rail.
`workspaces`	`Workspace[]`	Other workspaces: turns the header into a Team Switcher.
`workspaceId`	`string`	Id of the workspace you are in, when `workspaces` is passed.
`onWorkspaceChange`	`(id: string, workspace: Workspace) => void`	—
`nav`required	`AppShellNavItem[]`	The main nav, without a heading.
`sections`	`AppShellSection[]`	Headed groups under the nav: Projects, Favourites.
`user`required	`ProfileUser`	The signed-in person, opened as a Profile Menu from the top bar.
`profile`	`Omit<ProfileMenuProps, "user" \| "variant">`	Passed to the Profile Menu: plan, theme, sign out, accounts.
`header`	`React.ReactNode`	The page's own header in the top bar: a breadcrumb, a title, actions.
`sidebarFooter`	`React.ReactNode`	Pinned to the foot of the sidebar: usage, an upgrade card. Hidden in the rail.
`activeHref`	`string`	The current page. Without it the shell tracks the last row chosen.
`onNavigate`	`(href: string) => void`	Called instead of following the link, for client-side routing.
`commands`	`AppShellCommand[]`	Extra rows for ⌘K, under "Actions".
`collapsed`	`boolean`	Collapsed to the icon rail. Controlled.
`defaultCollapsed`	`boolean`	Collapsed on first render. Default false.
`onCollapsedChange`	`(collapsed: boolean) => void`	—
`shortcuts`	`boolean`	Listen for ⌘K and ⌘B. Default true; turn off when two shells share a page.
`sidebarWidth`	`number`	Sidebar width in px. Default 248.
`label`	`string`	Accessible name for the nav. Default "Main".
`children`required	`React.ReactNode`	—