Static Layouts

Static layouts use fixed sizes and flexible panels to create predictable, stable interfaces. These patterns are perfect for applications that need consistent structure and visual hierarchy.

Three-Pane Layout#

A classic layout with fixed sidebars and a flexible main content area. Perfect for dashboards, admin interfaces, or any application with sidebar navigation.

Fixed SidebarinitialSize="200px"

Main Contentflexible (no initialSize)

Fixed PanelinitialSize="150px"

import { Panel } from '@split-ui/react';

export default function ThreePaneDemo() {
  return (
    <Panel group>
      <Panel initialSize="200px" className="demo-panel">
        Fixed Sidebar
        <small>initialSize=&quot;200px&quot;</small>
      </Panel>
      <Panel className="demo-panel">
        Main Content
        <small>flexible (no initialSize)</small>
      </Panel>
      <Panel initialSize="150px" className="demo-panel">
        Fixed Panel
        <small>initialSize=&quot;150px&quot;</small>
      </Panel>
    </Panel>
  );
}

Vertical Layout#

Create vertical layouts using the orientation prop. Perfect for header/content/footer layouts or any vertically stacked interface.

HeaderinitialSize="60px"

Content Areaflexible (no initialSize)

FooterinitialSize="40px"

import { Panel } from '@split-ui/react';

export default function VerticalDemo() {
  return (
    <Panel group orientation="vertical">
      <Panel initialSize="60px" className="demo-panel">
        Header
        <small>initialSize=&quot;60px&quot;</small>
      </Panel>
      <Panel className="demo-panel">
        Content Area
        <small>flexible (no initialSize)</small>
      </Panel>
      <Panel initialSize="40px" className="demo-panel">
        Footer
        <small>initialSize=&quot;40px&quot;</small>
      </Panel>
    </Panel>
  );
}