Custom Resizer Styling

The <Resizer /> component can be customized with CSS classes to create different visual styles and interaction patterns.

Examples#

Left Top Panel

Left Bottom Panel

Middle Panel

Right Top Panel

Right Bottom Panel

import { Panel, Resizer } from '@split-ui/react';

export default function ResizerStyle01() {
  return (
    <Panel group>
      <Panel group orientation="vertical">
        <Panel className="demo-panel">Left Top Panel</Panel>
        <Resizer className="resizer" />
        <Panel className="demo-panel">Left Bottom Panel</Panel>
      </Panel>
      <Resizer className="resizer" />
      <Panel className="demo-panel">Middle Panel</Panel>
      <Resizer className="resizer" />
      <Panel group orientation="vertical">
        <Panel className="demo-panel">Right Top Panel</Panel>
        <Resizer className="resizer" />
        <Panel className="demo-panel">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';

export default function ResizerStyle02() {
  return (
    <Panel group>
      <Panel group orientation="vertical">
        <Panel className="demo-panel">Left Top Panel</Panel>
        <Resizer className="resizer" />
        <Panel className="demo-panel">Left Bottom Panel</Panel>
      </Panel>
      <Resizer className="resizer" />
      <Panel className="demo-panel">Middle Panel</Panel>
      <Resizer className="resizer" />
      <Panel group orientation="vertical">
        <Panel className="demo-panel">Right Top Panel</Panel>
        <Resizer className="resizer" />
        <Panel className="demo-panel">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';

export default function ResizerStyle03() {
  return (
    <Panel group>
      <Panel group orientation="vertical">
        <Panel className="demo-panel">Left Top Panel</Panel>
        <Resizer className="resizer" />
        <Panel className="demo-panel">Left Bottom Panel</Panel>
      </Panel>
      <Resizer className="resizer" />
      <Panel className="demo-panel">Middle Panel</Panel>
      <Resizer className="resizer" />
      <Panel group orientation="vertical">
        <Panel className="demo-panel">Right Top Panel</Panel>
        <Resizer className="resizer" />
        <Panel className="demo-panel">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';

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

CSS Custom Properties and Classes#

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

--split-ui-resizer-size: Controls the thickness of the resizer handle (default: 8px)
.split-ui-horizontal: Applied to the panel group containing horizontal resizers (between vertically stacked panels)
.split-ui-vertical: Applied to the panel group containing vertical resizers (between horizontally arranged panels)
--split-ui-horizontal: Set to 1 for horizontal panel groups, 0 for vertical panel groups (inherited by child resizers)
--split-ui-vertical: Set to 1 for vertical panel groups, 0 for horizontal panel groups (inherited by child resizers)

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>
);