Split UI

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="25%"
Main Contentflexible (no initialSize)
Fixed PanelinitialSize="20%"
import { Panel } from '@split-ui/react';
import styles from './index.module.css';

export default function ThreePaneDemo() {
  return (
    <Panel group>
      <Panel initialSize="25%" className={styles.demoPanel}>
        Fixed Sidebar
        <small>initialSize=&quot;25%&quot;</small>
      </Panel>
      <Panel className={styles.demoPanel}>
        Main Content
        <small>flexible (no initialSize)</small>
      </Panel>
      <Panel initialSize="20%" className={styles.demoPanel}>
        Fixed Panel
        <small>initialSize=&quot;20%&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="15%"
Content Areaflexible (no initialSize)
FooterinitialSize="10%"
import { Panel } from '@split-ui/react';
import styles from './index.module.css';

export default function VerticalDemo() {
  return (
    <Panel group orientation="vertical">
      <Panel initialSize="15%" className={styles.demoPanel}>
        Header
        <small>initialSize=&quot;15%&quot;</small>
      </Panel>
      <Panel className={styles.demoPanel}>
        Content Area
        <small>flexible (no initialSize)</small>
      </Panel>
      <Panel initialSize="10%" className={styles.demoPanel}>
        Footer
        <small>initialSize=&quot;10%&quot;</small>
      </Panel>
    </Panel>
  );
}