# AppShell

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

- Family: Layout, imported from `mizu-ui` or `mizu-ui/layout`
- Docs: https://mizu.user64bit.world/components/app-shell
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/layout/Layout.tsx

## 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>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/app-shell 0xuser64bit/mizu/side-nav
```

## Props

- `header / sidebar / footer / children`: `ReactNode`. Composed regions.
- `mainId`: `string` (default `"mizu-main"`). Unique skip-link destination.
- `mainTag`: `"main" | "section"` (default `"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.