For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/splitter.md.
Leaf UIReact components
GitHub

Splitter

Resize panels in a workspace.

Basic usage

basic.tsx
import { Splitter } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function SplitterBasic() {
  const [sizes, setSizes] = useState<readonly number[]>([35, 65]);
  return (
    <Splitter
      style={{ height: 220 }}
      sizes={sizes}
      onResize={setSizes}
      panels={[
        {
          key: 'navigation',
          min: 20,
          max: 55,
          collapsible: true,
          children: (
            <div style={{ padding: 16 }}>
              {'Navigation — drag the divider or use arrow keys.'}
            </div>
          ),
        },
        {
          key: 'content',
          min: 30,
          children: <div style={{ padding: 16 }}>{'Workspace'}</div>,
        },
      ]}
    />
  );
}

Vertical panels

basic.tsx
import { Splitter } from '@ifhover/leaf-ui';

export function SplitterVertical() {
  return (
    <Splitter
      direction="vertical"
      style={{ height: 240 }}
      defaultSizes={[60, 40]}
      panels={[
        {
          key: 'editor',
          min: 25,
          children: <div style={{ padding: 16 }}>{'Editor'}</div>,
        },
        {
          key: 'output',
          min: 15,
          children: <div style={{ padding: 16 }}>{'Output'}</div>,
        },
      ]}
    />
  );
}

SplitterPanel

PropertyTypeDefaultDescription
keystring—Required. Stable, unique identifier.
childrenReactNode—Required. Content, or child nodes for hierarchical records.
minnumber—Minimum panel percentage.
maxnumber—Maximum panel percentage.
collapsibleboolean—Allow collapsing and restoring a panel.
resizableboolean—Allow resizing by dragging or arrow keys.

Splitter API

PropertyTypeDefaultDescription
panelsreadonly SplitterPanel[]—Required. Workspace panels.
sizesreadonly number[]—Controlled panel proportions, normalized to 100.
defaultSizesreadonly number[]—Initial panel proportions.
onResize(sizes: number[]) => void—Called while resizing.
onResizeEnd(sizes: number[]) => void—Called when resizing ends.
direction'horizontal' | 'vertical''horizontal'Arrange panels horizontally or vertically.

Types and interaction

Import the props and data types when creating reusable configuration.

import type { SplitterPanel, SplitterProps } from '@ifhover/leaf-ui';

Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.