Split UI

Custom Resizer Styling

The <Resizer /> component can be fully customized with CSS classes to create different visual styles and interaction patterns beyond the built-in themes.

For pre-made resizer styles, see the Themes page.

Examples

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

export default function ResizerStyle01() {
  return (
    <Panel group>
      <Panel group orientation="vertical">
        <Panel className={styles.demoPanel}>Left Top Panel</Panel>
        <Resizer className={styles.resizer} />
        <Panel className={styles.demoPanel}>Left Bottom Panel</Panel>
      </Panel>
      <Resizer className={styles.resizer} />
      <Panel className={styles.demoPanel}>Middle Panel</Panel>
      <Resizer className={styles.resizer} />
      <Panel group orientation="vertical">
        <Panel className={styles.demoPanel}>Right Top Panel</Panel>
        <Resizer className={styles.resizer} />
        <Panel className={styles.demoPanel}>Right Bottom Panel</Panel>
      </Panel>
    </Panel>
  );
}
Left Top Panel
Left Bottom Panel
Middle Panel
Right Top Panel
Right Bottom Panel
import { Panel, Resizer } from '@split-ui/react';
import styles from './index.module.css';

export default function ResizerStyle04() {
  return (
    <Panel group>
      <Panel group orientation="vertical">
        <Panel className={styles.demoPanel}>Left Top Panel</Panel>
        <Resizer className={styles.resizer} />
        <Panel className={styles.demoPanel}>Left Bottom Panel</Panel>
      </Panel>
      <Resizer className={styles.resizer} />
      <Panel className={styles.demoPanel}>Middle Panel</Panel>
      <Resizer className={styles.resizer} />
      <Panel group orientation="vertical">
        <Panel className={styles.demoPanel}>Right Top Panel</Panel>
        <Resizer className={styles.resizer} />
        <Panel className={styles.demoPanel}>Right Bottom Panel</Panel>
      </Panel>
    </Panel>
  );
}

CSS Custom Properties and Classes

The resizer component provides several CSS custom properties and classes for styling:

Orientation-based Styling with calc()

The orientation variables can be used with calc() to create responsive styles that adapt based on resizer orientation:

.resizer::after {
  /* Different widths: 24px for horizontal, 3px for vertical */
  width: calc(
    var(--split-ui-horizontal) * 24px + var(--split-ui-vertical) * 3px
  );
  /* Different heights: 3px for horizontal, 24px for vertical */
  height: calc(
    var(--split-ui-horizontal) * 3px + var(--split-ui-vertical) * 24px
  );

  /* Rotate 90 degrees only for vertical resizers */
  transform: translate(-50%, -50%)
    rotate(calc(var(--split-ui-vertical) * 90deg));
}

This approach eliminates the need for separate orientation-specific CSS rules and makes your styles more maintainable.

Adding Elements to Resizers

You can add custom elements inside the <Resizer> component to create visual indicators or interactive elements:

return (
  <Panel group>
    <Panel>Content 1</Panel>
    <Resizer>
      <svg width="16" height="16" viewBox="0 0 16 16" className="resizer-icon">
        <circle cx="4" cy="8" r="1" fill="currentColor" />
        <circle cx="8" cy="8" r="1" fill="currentColor" />
        <circle cx="12" cy="8" r="1" fill="currentColor" />
      </svg>
    </Resizer>
    <Panel>Content 2</Panel>
  </Panel>
);