# antuikit / Layout

> Layout and its four regions, with the Sider's collapse trigger drawn from the active icon pack. Header, Content and Footer add only `className` merging.

Docs: https://antuikit.com/docs/components/layout

## Install

npx antuikit@latest init
npx antuikit@latest add layout

## Import

import { Layout } from "@/components/ui/layout";

## Demos

- [Four classic shapes](https://ui.antuikit.com/embed/layout/basic.md): Switch between the four common page frames: stacked, a Sider before or after the content, and a Sider running the full height.
- [Header, content, footer](https://ui.antuikit.com/embed/layout/header-content-footer.md): Stack `Layout.Header`, `Layout.Content` and `Layout.Footer` for the simplest page, with a dark menu in the header and a breadcrumb above the content.
- [With a Sider](https://ui.antuikit.com/embed/layout/with-sider.md): Put a `Layout.Sider` directly inside the outer `Layout` to place it beside an inner `Layout` holding the header, content and footer.
- [Documentation shell](https://ui.antuikit.com/embed/layout/header-sider.md): A top menu over a content area that holds its own `Layout.Sider`, so the side menu only spans the content, like a documentation site.
- [Application shell](https://ui.antuikit.com/embed/layout/header-sider-app.md): A top menu over an inner `Layout` whose `Layout.Sider` runs the full height beside the breadcrumb and content, like a product dashboard.
- [Collapsible](https://ui.antuikit.com/embed/layout/collapsible.md): Set `collapsible` on the Sider and control `collapsed` with `onCollapse` to add a bar that folds it down to the menu icons.
- [Custom trigger](https://ui.antuikit.com/embed/layout/custom-trigger.md): Pass `trigger={null}` to drop the built-in collapse bar, and toggle `collapsed` from a button of your own in the header.
- [Collapsible overlay](https://ui.antuikit.com/embed/layout/collapsible-overlay.md): Position the Sider over the content so it opens on top instead of pushing the page aside, with a menu icon as its `trigger`.
- [Zero-width trigger](https://ui.antuikit.com/embed/layout/zero-width.md): Set `collapsedWidth={0}` to hide the Sider completely when collapsed, leaving a small tab on the edge that opens it again.
- [Responsive breakpoint](https://ui.antuikit.com/embed/layout/responsive.md): Set `breakpoint="md"` to collapse the Sider on narrow screens, and pair it with `collapsedWidth={0}` so it hides behind a tab.
- [Fixed header](https://ui.antuikit.com/embed/layout/fixed-header.md): Make the header sticky at the top of a scrolling layout, so the menu stays in view while the content scrolls under it.
- [Fixed Sider](https://ui.antuikit.com/embed/layout/fixed-sider.md): Make the Sider sticky and as tall as the screen, so the side menu stays in place while the content beside it scrolls.
- [Admin shell](https://ui.antuikit.com/embed/layout/admin-shell.md): An admin app frame with a collapsible dark Sider, a header with a breadcrumb, alerts and a user menu, and a row of stat cards.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/layout`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Layout` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.