> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/splitter.html

> 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.

# Splitter

Resize panels in a workspace.

## Basic usage


Navigation — drag the divider or use arrow keys.

−

Workspace

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/splitter/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>,
        },
      ]}
    />
  );
}
```

Expand code

## Vertical panels


Editor

Output

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/splitter/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>,
        },
      ]}
    />
  );
}
```

Expand code

## SplitterPanel

| Property      | Type        | Default | Description                                                 |
| ------------- | ----------- | ------- | ----------------------------------------------------------- |
| `key`         | `string`    | —       | Required. Stable, unique identifier.                        |
| `children`    | `ReactNode` | —       | Required. Content, or child nodes for hierarchical records. |
| `min`         | `number`    | —       | Minimum panel percentage.                                   |
| `max`         | `number`    | —       | Maximum panel percentage.                                   |
| `collapsible` | `boolean`   | —       | Allow collapsing and restoring a panel.                     |
| `resizable`   | `boolean`   | —       | Allow resizing by dragging or arrow keys.                   |

## Splitter API

| Property       | Type                                             | Default        | Description                                      |
| -------------- | ------------------------------------------------ | -------------- | ------------------------------------------------ |
| `panels`       | `readonly `[`SplitterPanel`](#splitterpanel)`[]` | —              | Required. Workspace panels.                      |
| `sizes`        | `readonly number[]`                              | —              | Controlled panel proportions, normalized to 100. |
| `defaultSizes` | `readonly 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.

```ts
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.