antuikit's Layout is Ant Design's Layout, installed into your project as a file you own. It takes the same props, with a ref on each part. The Sider's collapse trigger draws its glyph from your icon pack: menu at zero width, and chevrons when you control collapsed. Both are marked antuikit in the API tables below.
Install
npx antuikit@latest init
npx antuikit@latest add layout
The first command sets up AntuikitProvider and the theme tokens, and the second adds this component.
Import
From @/components/ui/layout, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package. It exports Layout and its four parts.
import { Layout, Content, Footer, Header, Sider } from "@/components/ui/layout"
The compound parts
One item installs five components. Layout is the container and carries the other four as properties, and the same four are exported by name. They are the same components either way, so pick one spelling per file.
Layout renders a <div> and decides the direction: a column, or a row when one of its direct children is a Sider.
Layout.Header renders a <header> and Layout.Footer a <footer>. Both take the same props as the root.
Layout.Content renders a <main>, so a page is only allowed one of them.
Layout.Sider renders an <aside> and is the only part with props of its own: the width pair, the collapse state, the breakpoint and the trigger.
// Flat, for a file that only ever touches one part:
import { Sider } from "@/components/ui/layout"
Pass `hasSider` when the Sider is inside a component of your own. The Layout finds a direct Sider child by itself, but a wrapped one only after it mounts, so the first paint would be a column.
The axes
The enumerated props, and the values each one takes. They match the Figma properties on the Design tab.
The Layout root has none. Both live on Sider.
theme is light or dark, and it defaults to dark whatever the page mode, so the rail is inverted on a light page until you set it.
breakpoint takes a step from xs to xxxl and collapses the Sider below it: lg means narrower than 992px. The kit's Tailwind breakpoints use the same numbers, so a lg: utility and a breakpoint="lg" Sider change at the same width.
width and collapsedWidth are not axes: they are open values, 200 and 80 by default, and a bare number is treated as px.
Flags
Four booleans, one on the Layout root and three on the Sider.
hasSider on the root sets the row direction up front. A direct Sider child is found without it; a Sider wrapped in a component of your own needs it.
collapsible draws the trigger bar at the bottom of the rail. A breakpoint collapses the Sider without it, and a zero-width Sider still gets its floating tab once the window is narrower than the breakpoint. So this flag adds the control, not the collapsing.
defaultCollapsed is the starting state for a Sider that owns its own collapse, and is ignored once collapsed is passed.
reverseArrow is for a rail on the trailing edge: it flips the default chevron and moves the zero-width tab to the other side. It does not move the Sider, which is ordered by where you render it.
collapsed is the controlled state, not a flag. The Sider is controlled while it is not undefined, and only then does the trigger get the pack's chevron, since the chevron's direction depends on the state.
Slots
The props that take a node. Use a slot for your own markup before reaching for a descendant selector.
Layout has one slot, trigger on the Sider, and it is used in two places: the bar at the bottom of a normal Sider, and the tab on a zero-width one. The same value has to make sense in both.
trigger={null} removes both. On a zero-width Sider that leaves no way to bring the rail back, so pair it with a control of your own.
Your own node always wins, and it is the fix for the trigger's accessibility: the bar is a <div> with an onClick and no tab stop, and a real button inside it adds one.
Everything else arrives as children: the Header, the Content, the Footer and whatever fills the rail. Layout places them and draws nothing of its own.
The trigger is the one prop the kit gives a default. On a zero-width Sider it is always the pack's menu glyph. On a normal Sider the pack's chevron is used only when you control collapsed, since it points one way open and the other way closed, and flips for right-to-left and reverseArrow.
Events
onCollapse
onBreakpoint
Styling
Each part is its own component, so pass className or style to the part you want to change. The Sider also takes classNames and styles with root and body keys.
API Reference
Layout
Layout's props. Rows marked antuikit in the Version column are added by the kit.
Layout.Sider
Layout.Sider's props. Rows marked antuikit in the Version column are added by the kit.