<!-- Generated by scripts/gen-docs.mts from the JSDoc in registry/. Do not edit; run `pnpm run docs`. -->

# StackedLayout

The shell of an app with a `Navbar`: the bar across the top, in view while the page scrolls, and the page below it in a centered column. It renders the page's `<main>`, starts with a "Skip to content" link, and keeps its footer at the bottom of a short page.

```tsx
import { StackedLayout } from "@/components/ouro/sidebar/stacked-layout";
```

## Example

```tsx
<StackedLayout navbar={<Navbar label="Main" items={items} currentPath={pathname} />}>
  <Outlet />
</StackedLayout>
```

## Usage

The phone menu opens once JavaScript has loaded (after hydration); the links are in the server HTML from 640px up.

Use `AuthLayout` for the sign-in pages.

## Use instead when

- Use `SidebarLayout` instead when the navigation is a `Sidebar`.

## Props

Type: `StackedLayoutProps`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `"div" \| "main"` | `"main"` | The element around the page. Pass `"div"` when the layout renders inside a page that already has a `<main>`, since a document has one. |
| `bleed` | `boolean` |  | Removes the column and its padding, for content that runs edge to edge (a map, a cover photo). |
| `children` (required) | `ReactNode` |  | The page. It renders inside the page's `<main>`, in a centered column up to 72rem wide. |
| `className` | `string` |  | Layout only: height and margins (`min-h-96`). Appearance classes warn in development. |
| `footer` | `ReactNode` |  | A line at the bottom of the page: links, a copyright. It sits at the bottom of the screen on a short page. |
| `navbar` (required) | `ReactNode` |  | The app's `Navbar`. It stays at the top while the page scrolls. |
| `ref` | `Ref<HTMLDivElement>` |  | Reaches the rendered element. |
| `skipLabel` | `string` | `"Skip to content"` | The text of the link that skips the navbar, shown when it has keyboard focus. |

## Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

- `header`: Not a prop. Ouro UI uses `navbar`: `<StackedLayout navbar={<Navbar … />}>`.
- `sidebar`: Not a prop. A `Navbar` opens its own drawer on a phone; for a sidebar use `SidebarLayout`.

## `className` is for layout only

Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`).

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn.

Alignment classes (`text-center`) warn too: set alignment on a parent element.