Skip to content
MIZU.

AppShell

Named working regions and a skip link, composed around the product's real content.

View .md

Live — this one is real

Skip to content
Workshop

Your workspace

A shell gives content a place; it does not decide the product for you.

All changes stay on this device.

Usage

tsx
import { AppShell, SideNav } from "mizu-ui";

export function Example() {
  return (
    <AppShell
      mainTag="section"
      mainId="shell-demo-content"
      header={<strong>Workshop</strong>}
      sidebar={
        <SideNav
          currentPath="/components"
          groups={[
            {
              label: "Explore",
              items: [
                { label: "Collection", href: "/components" },
                { label: "Lab", href: "/lab" },
              ],
            },
          ]}
        />
      }
      footer={
        <span className="mizu-field-hint">
          All changes stay on this device.
        </span>
      }
    >
      <h3>Your workspace</h3>
      <p className="mizu-field-hint">
        A shell gives content a place; it does not decide the product for you.
      </p>
    </AppShell>
  );
}

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

sh
npx shadcn@latest add 0xuser64bit/mizu/app-shell 0xuser64bit/mizu/side-nav

The example also uses SideNav, so the command adds it too.

Every component imports from its own path, its name in kebab case. Its source, layout/Layout.tsx, also holds Stack, Grid, AspectRatio and ScrollArea. Each has its own command and path; adding one after this copies only its small entry file. To paste the example, replace its mizu-ui import with:

tsx
import { AppShell } from "@/components/ui/mizu/app-shell";
import { SideNav } from "@/components/ui/mizu/side-nav";

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports. A Server Component: it renders on the server, with no client JavaScript of its own.

Inspect layout/Layout.tsx

Source is included in the npm package under src/layout/Layout.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
header / sidebar / footer / childrenReactNode—Composed regions.
mainIdstring"mizu-main"Unique skip-link destination.
mainTag"main" | "section""main"Use section when embedding in an existing main landmark.

Accessibility

Native landmarks and a visible-on-focus skip link. Supply a unique mainId per shell. Sidebar stacks on small screens.

Motion

CSS reflow, no entrance animation.

Works alongside

StackGridSplitPaneDock