StackedLayout

The shell of an app with a Navbar: the bar across the top, in view while the page scrolls, an optional toolbar under it for the page's own tools, and the page below them 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. navbarBehavior lets the bars scroll away with a document, or slide out of the way of a reading surface.

Spoonjoy

Recipes

Twelve saved recipes.

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo

npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.3.10

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/stacked-layout#v1.3.10

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/stacked-layout

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/stacked-layout#v1.3.10 ourostack/ouro-ui/stacked-layout-tests#v1.3.10

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

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<StackedLayout
  navbar={<Navbar label="Main" items={items} currentPath={pathname} />}
  toolbar={<Toolbar label="Week" items={weekTools} />}
>
  <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.

as: Type: "div" | "main"; Default: "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: Type: boolean; Removes the column and its padding, for content that runs edge to edge (a map, a cover photo).
children (required): Type: ReactNode; The page. It renders inside the page's <main>, in a centered column up to 72rem wide.
className: Type: string; Layout only: height and margins (min-h-96). Appearance classes warn in development.
footer: Type: 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): Type: ReactNode; The app's Navbar. It stays at the top while the page scrolls, unless navbarBehavior says otherwise.
navbarBehavior: Type: "sticky" | "static" | "auto-hide"; Default: "sticky"; What the navbar, and the toolbar under it, do while the page scrolls. "sticky" keeps them at the top. "static" lets them scroll away with the page, for a document. "auto-hide" is for a reading surface with art that runs under the bars: they slide up out of view as the reader scrolls down, and come back on a scroll up, at the top of the page, or when keyboard focus moves into them. Keyboard focus or an open menu in them holds them in view. Over the page they are translucent, with the page blurred behind them. With reduced motion they show and hide at once, without sliding.
ref: Type: Ref<HTMLDivElement>; Reaches the rendered element.
skipLabel: Type: string; Default: "Skip to content"; The text of the link that skips the navbar, shown when it has keyboard focus.
toolbar: Type: ReactNode; A second bar right under the navbar, for the page's own tools: a search field, a view switcher, a week stepper. Usually a Toolbar. It runs the full width with the navbar's padding and its own line below, fills the bar's width (wrap several things in one element to put them in a row), and moves with the navbar: it sticks, scrolls away or hides with it. It is a landmark named toolbarLabel, so a screen-reader user can jump to it.
toolbarLabel: Type: string; Default: "Page tools"; Names the toolbar's landmark for screen readers. It is not shown.

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, unless `navbarBehavior` says otherwise.
`navbarBehavior`	`"sticky" \| "static" \| "auto-hide"`	`"sticky"`	What the navbar, and the toolbar under it, do while the page scrolls. `"sticky"` keeps them at the top. `"static"` lets them scroll away with the page, for a document. `"auto-hide"` is for a reading surface with art that runs under the bars: they slide up out of view as the reader scrolls down, and come back on a scroll up, at the top of the page, or when keyboard focus moves into them. Keyboard focus or an open menu in them holds them in view. Over the page they are translucent, with the page blurred behind them. With reduced motion they show and hide at once, without sliding.
`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.
`toolbar`	`ReactNode`		A second bar right under the navbar, for the page's own tools: a search field, a view switcher, a week stepper. Usually a `Toolbar`. It runs the full width with the navbar's padding and its own line below, fills the bar's width (wrap several things in one element to put them in a row), and moves with the navbar: it sticks, scrolls away or hides with it. It is a landmark named `toolbarLabel`, so a screen-reader user can jump to it.
`toolbarLabel`	`string`	`"Page tools"`	Names the toolbar's landmark for screen readers. It is not shown.

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 … />}>.
hideOnScroll: Not a prop. Use navbarBehavior="auto-hide".
sidebar: Not a prop. A Navbar opens its own drawer on a phone; for a sidebar use SidebarLayout.
sticky: Not a prop. The navbar sticks by default; navbarBehavior="static" lets it scroll away.

`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.

Source on GitHub This page as Markdown