Layout

The page scaffold: Layout with Layout.Header, Layout.Sider, Layout.Content, and Layout.Footer. Layout switches its axis automatically — it lays out as a column, but flips to a row when it contains a Sider, so nesting a Layout around a Sider + Content gives the familiar header / (sider + content) / footer shell. The axis is resolved correctly from the first server paint, then stays correct for Fragment-wrapped Siders after mount.

import { Layout } from '@jbpark/ui-kit';

<Layout>
  <Layout.Header>Header</Layout.Header>
  <Layout>
    <Layout.Sider collapsible>Sider</Layout.Sider>
    <Layout.Content>Content</Layout.Content>
  </Layout>
  <Layout.Footer>Footer</Layout.Footer>
</Layout>;

Header

Sider

Content — the main area grows to fill the space between the header and footer.

Footer

Composition

• Layout — the flex wrapper. The outermost one is min-h-screen; nested ones shrink to fit.
• Layout.Header — sticky by default; also accepts position="static" | "fixed".
• Layout.Sider — a side panel, optionally collapsible with a breakpoint that auto-collapses.
• Layout.Content — the <main> landmark; use render={<section />} to avoid a duplicate <main> when nested.
• Layout.Footer — a full-width <footer>.

Sider props

Prop	Type	Default
width	number | string	200
collapsedWidth	number | string	80
collapsible	boolean	false
collapsed	boolean (controlled)	-
defaultCollapsed	boolean	false
placement	'left' | 'right'	'left'
breakpoint	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'	-
reverseArrow	boolean	false
trigger	ReactNode (custom toggle)	-
onCollapse	(collapsed: boolean) => void	-
onBreakpoint	(broken: boolean) => void	-

Header takes position; all four sub-components forward the rest of their native element props.