Split UI

Built-in Themes

@split-ui/react includes three built-in themes for resizer styling. Import a theme CSS file and apply its class to a parent element to style all resizers within.

Simple Theme

A minimal single-pixel line with a wider invisible click target for easy interaction.

Left Top Panel
Left Bottom Panel
Middle Panel
Right Top Panel
Right Bottom Panel
import { Panel, Resizer } from '@split-ui/react';
import '@split-ui/react/theme-simple.css';
import styles from './index.module.css';

export default function SimpleTheme() {
  return (
    <div className="split-ui-theme-simple" style={{ height: '100%' }}>
      <Panel group>
        <Panel group orientation="vertical">
          <Panel className={styles.demoPanel}>Left Top Panel</Panel>
          <Resizer />
          <Panel className={styles.demoPanel}>Left Bottom Panel</Panel>
        </Panel>
        <Resizer />
        <Panel className={styles.demoPanel}>Middle Panel</Panel>
        <Resizer />
        <Panel group orientation="vertical">
          <Panel className={styles.demoPanel}>Right Top Panel</Panel>
          <Resizer />
          <Panel className={styles.demoPanel}>Right Bottom Panel</Panel>
        </Panel>
      </Panel>
    </div>
  );
}

import '@split-ui/react/theme-simple.css';

<body className="split-ui-theme-simple">
  <!-- ... -->
</body>

Handle Theme

A single-pixel line with a centered handle indicator for visual feedback.

Left Top Panel
Left Bottom Panel
Middle Panel
Right Top Panel
Right Bottom Panel
import { Panel, Resizer } from '@split-ui/react';
import '@split-ui/react/theme-handle.css';
import styles from './index.module.css';

export default function HandleTheme() {
  return (
    <div className="split-ui-theme-handle" style={{ height: '100%' }}>
      <Panel group>
        <Panel group orientation="vertical">
          <Panel className={styles.demoPanel}>Left Top Panel</Panel>
          <Resizer />
          <Panel className={styles.demoPanel}>Left Bottom Panel</Panel>
        </Panel>
        <Resizer />
        <Panel className={styles.demoPanel}>Middle Panel</Panel>
        <Resizer />
        <Panel group orientation="vertical">
          <Panel className={styles.demoPanel}>Right Top Panel</Panel>
          <Resizer />
          <Panel className={styles.demoPanel}>Right Bottom Panel</Panel>
        </Panel>
      </Panel>
    </div>
  );
}

import '@split-ui/react/theme-handle.css';

<body className="split-ui-theme-handle">
  <Panel group>
  <!-- ... -->
</body>;

VSCode Theme

A VSCode-style transparent resizer that shows a colored line on hover.

Left Top Panel
Left Bottom Panel
Middle Panel
Right Top Panel
Right Bottom Panel
import { Panel, Resizer } from '@split-ui/react';
import '@split-ui/react/theme-vscode.css';
import styles from './index.module.css';

export default function VscodeTheme() {
  return (
    <div className="split-ui-theme-vscode" style={{ height: '100%' }}>
      <Panel group>
        <Panel group orientation="vertical">
          <Panel className={styles.demoPanel}>Left Top Panel</Panel>
          <Resizer />
          <Panel className={styles.demoPanel}>Left Bottom Panel</Panel>
        </Panel>
        <Resizer />
        <Panel className={styles.demoPanel}>Middle Panel</Panel>
        <Resizer />
        <Panel group orientation="vertical">
          <Panel className={styles.demoPanel}>Right Top Panel</Panel>
          <Resizer />
          <Panel className={styles.demoPanel}>Right Bottom Panel</Panel>
        </Panel>
      </Panel>
    </div>
  );
}

import '@split-ui/react/theme-vscode.css';

<body className="split-ui-theme-vscode">
  <!-- ... -->
</body>;

Customizing Theme Colors

All themes support CSS custom properties for color customization:

.split-ui-theme-handle {
  --split-ui-theme-color-divider: #e5e7eb;
  --split-ui-theme-color-primary: #3b82f6;
}