Skip to content
Layout

Layout

Multi-pane page shell with header, side panels, and scrollable content.

React source Astro source Core source

Layout

Multi-pane page shell for tool UIs: optional header/footer bands and a horizontal middle row for start, content, and end zones. Pair with LayoutContent and LayoutPanel for master-detail inspectors.

Examples

Default
Demo.tsxtsx
import { useState } from 'react';
import {
  Button,
  Layout,
  LayoutContent,
  LayoutPanel,
  ResizeHandle,
  useResizable,
} from '@var-ui/react';

const { end } = useResizable({
  regions: { end: { defaultWidth: 280, minWidth: 220, maxWidth: 400 } },
});

<Layout
  height="auto"
  padding={0}
  content={<LayoutContent padding={0}>{/* list */}</LayoutContent>}
  end={
    <>
      <LayoutPanel resizable={end} hasDivider label="Details" role="complementary">
        Inspector
      </LayoutPanel>
      <ResizeHandle {...end.handleProps} />
    </>
  }
/>

Props

Accessibility

Use role and label on LayoutContent and LayoutPanel when multiple landmarks of the same type appear on a page.