Patterns
Page Layout
Full-height page shell — navbar slot, offset main area, footer slot.
The standard full-height page shell: a navbar slot, a flex-1 main area offset to clear the fixed navbar, and a footer slot. Navbar and footer are passed as slots (typically YunUI's <Navbar/> and <Footer/>), so the shell stays decoupled from their props. The default pt-28 on <main> clears YunUI's fixed navbar — override it via mainClassName for a taller or shorter bar.
Import
tsx
1import { PageLayout } from "@yuhuanowo/yunui/patterns";Example
Pass <Navbar/> and <Footer/> as slots; set hideFooter for focused pages and transparentBg to paint your own backdrop.
PageLayout
navbar slot
main content
footer slot
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | Page content, rendered inside `<main>`. |
| className | string | — | Extra classes on the outer wrapper. |
| footer | ReactNode | — | Bottom slot — typically `<Footer/>`. Hidden when `hideFooter`. |
| hideFooter | boolean | false | Drop the footer (e.g. focused/app pages). |
| mainClassName | string | — | Override the `<main>` classes — defaults to `flex-1 pt-28` (clears the fixed navbar). Pass your own offset for a taller/shorter bar. |
| mainId | string | main-content | `id` on the `<main>` element — the target a "skip to main content" link jumps to. Defaults to `"main-content"`, the conventional value, so the skip link in a consumer's root layout actually lands somewhere. Pass `undefined` explicitly if a page must not carry the id (e.g. two shells on one page). |
| navbar | ReactNode | — | Top navigation slot — typically `<Navbar/>`. Rendered above `<main>`. |
| transparentBg | boolean | false | Skip the default `bg-background` so a page can paint its own backdrop. |