Splitter

The Splitter lets users resize panels by dragging a handle between them.

// apps/docs/src/components/examples/splitter/default/react.tsx
import {
  Splitter,
  SplitterPanel,
  SplitterResizeTrigger,
  SplitterResizeTriggerIndicator,
} from '@cloudvoyant/helical-react';

export default function ReactSplitterDefault() {
  return (
    <div className="h-64 w-full rounded-md border border-border bg-background">
      <Splitter panels={[{ id: 'a' }, { id: 'b' }]}>
        <SplitterPanel id="a" className="flex items-center justify-center">
          <span className="text-sm font-medium">A</span>
        </SplitterPanel>
        <SplitterResizeTrigger id="a:b">
          <SplitterResizeTriggerIndicator />
        </SplitterResizeTrigger>
        <SplitterPanel id="b" className="flex items-center justify-center">
          <span className="text-sm font-medium">B</span>
        </SplitterPanel>
      </Splitter>
    </div>
  );
}

<!-- apps/docs/src/components/examples/splitter/default/svelte.svelte -->
<script lang="ts">
  import {
    Splitter,
    SplitterPanel,
    SplitterResizeTrigger,
    SplitterResizeTriggerIndicator,
  } from '@cloudvoyant/helical-svelte';
</script>

<div class="h-64 w-full rounded-md border border-border bg-background">
  <Splitter panels={[{ id: 'a' }, { id: 'b' }]}>
    <SplitterPanel id="a" class="flex items-center justify-center">
      <span class="text-sm font-medium">A</span>
    </SplitterPanel>
    <SplitterResizeTrigger id="a:b">
      <SplitterResizeTriggerIndicator />
    </SplitterResizeTrigger>
    <SplitterPanel id="b" class="flex items-center justify-center">
      <span class="text-sm font-medium">B</span>
    </SplitterPanel>
  </Splitter>
</div>

Examples

Collapsible

// apps/docs/src/components/examples/splitter/collapsible/react.tsx
import {
  Splitter,
  SplitterPanel,
  SplitterResizeTrigger,
  SplitterResizeTriggerIndicator,
} from '@cloudvoyant/helical-react';

export default function ReactSplitterCollapsible() {
  return (
    <div className="h-64 w-full rounded-md border border-border bg-background">
      <Splitter
        defaultSize={[40, 60]}
        panels={[
          { id: 'a', collapsible: true, collapsedSize: 5, minSize: 25 },
          { id: 'b', minSize: 50 },
        ]}
      >
        <SplitterPanel id="a" className="flex items-center justify-center">
          <span className="text-sm font-medium">A</span>
        </SplitterPanel>
        <SplitterResizeTrigger id="a:b">
          <SplitterResizeTriggerIndicator />
        </SplitterResizeTrigger>
        <SplitterPanel id="b" className="flex items-center justify-center">
          <span className="text-sm font-medium">B</span>
        </SplitterPanel>
      </Splitter>
    </div>
  );
}

<!-- apps/docs/src/components/examples/splitter/collapsible/svelte.svelte -->
<script lang="ts">
  import {
    Splitter,
    SplitterPanel,
    SplitterResizeTrigger,
    SplitterResizeTriggerIndicator,
  } from '@cloudvoyant/helical-svelte';
</script>

<div class="h-64 w-full rounded-md border border-border bg-background">
  <Splitter
    defaultSize={[40, 60]}
    panels={[
      { id: 'a', collapsible: true, collapsedSize: 5, minSize: 25 },
      { id: 'b', minSize: 50 },
    ]}
  >
    <SplitterPanel id="a" class="flex items-center justify-center">
      <span class="text-sm font-medium">A</span>
    </SplitterPanel>
    <SplitterResizeTrigger id="a:b">
      <SplitterResizeTriggerIndicator />
    </SplitterResizeTrigger>
    <SplitterPanel id="b" class="flex items-center justify-center">
      <span class="text-sm font-medium">B</span>
    </SplitterPanel>
  </Splitter>
</div>

Disabled

// apps/docs/src/components/examples/splitter/disabled/react.tsx
import {
  Splitter,
  SplitterPanel,
  SplitterResizeTrigger,
  SplitterResizeTriggerIndicator,
} from '@cloudvoyant/helical-react';

export default function ReactSplitterDisabled() {
  return (
    <div className="h-64 w-full rounded-md border border-border bg-background">
      <Splitter panels={[{ id: 'a' }, { id: 'b' }]}>
        <SplitterPanel id="a" className="flex items-center justify-center">
          <span className="text-sm font-medium">A</span>
        </SplitterPanel>
        <SplitterResizeTrigger id="a:b" disabled>
          <SplitterResizeTriggerIndicator />
        </SplitterResizeTrigger>
        <SplitterPanel id="b" className="flex items-center justify-center">
          <span className="text-sm font-medium">B</span>
        </SplitterPanel>
      </Splitter>
    </div>
  );
}

<!-- apps/docs/src/components/examples/splitter/disabled/svelte.svelte -->
<script lang="ts">
  import {
    Splitter,
    SplitterPanel,
    SplitterResizeTrigger,
    SplitterResizeTriggerIndicator,
  } from '@cloudvoyant/helical-svelte';
</script>

<div class="h-64 w-full rounded-md border border-border bg-background">
  <Splitter panels={[{ id: 'a' }, { id: 'b' }]}>
    <SplitterPanel id="a" class="flex items-center justify-center">
      <span class="text-sm font-medium">A</span>
    </SplitterPanel>
    <SplitterResizeTrigger id="a:b" disabled>
      <SplitterResizeTriggerIndicator />
    </SplitterResizeTrigger>
    <SplitterPanel id="b" class="flex items-center justify-center">
      <span class="text-sm font-medium">B</span>
    </SplitterPanel>
  </Splitter>
</div>

Min Max

// apps/docs/src/components/examples/splitter/min-max/react.tsx
import {
  Splitter,
  SplitterPanel,
  SplitterResizeTrigger,
  SplitterResizeTriggerIndicator,
} from '@cloudvoyant/helical-react';

export default function ReactSplitterMinMax() {
  return (
    <div className="h-64 w-full rounded-md border border-border bg-background">
      <Splitter
        defaultSize={[30, 70]}
        panels={[
          { id: 'a', minSize: 20, maxSize: 60 },
          { id: 'b', minSize: 40 },
        ]}
      >
        <SplitterPanel id="a" className="flex items-center justify-center">
          <span className="text-sm font-medium">A</span>
        </SplitterPanel>
        <SplitterResizeTrigger id="a:b">
          <SplitterResizeTriggerIndicator />
        </SplitterResizeTrigger>
        <SplitterPanel id="b" className="flex items-center justify-center">
          <span className="text-sm font-medium">B</span>
        </SplitterPanel>
      </Splitter>
    </div>
  );
}

<!-- apps/docs/src/components/examples/splitter/min-max/svelte.svelte -->
<script lang="ts">
  import {
    Splitter,
    SplitterPanel,
    SplitterResizeTrigger,
    SplitterResizeTriggerIndicator,
  } from '@cloudvoyant/helical-svelte';
</script>

<div class="h-64 w-full rounded-md border border-border bg-background">
  <Splitter
    defaultSize={[30, 70]}
    panels={[
      { id: 'a', minSize: 20, maxSize: 60 },
      { id: 'b', minSize: 40 },
    ]}
  >
    <SplitterPanel id="a" class="flex items-center justify-center">
      <span class="text-sm font-medium">A</span>
    </SplitterPanel>
    <SplitterResizeTrigger id="a:b">
      <SplitterResizeTriggerIndicator />
    </SplitterResizeTrigger>
    <SplitterPanel id="b" class="flex items-center justify-center">
      <span class="text-sm font-medium">B</span>
    </SplitterPanel>
  </Splitter>
</div>

Multiple Panels

// apps/docs/src/components/examples/splitter/multiple-panels/react.tsx
import {
  Splitter,
  SplitterPanel,
  SplitterResizeTrigger,
  SplitterResizeTriggerIndicator,
} from '@cloudvoyant/helical-react';

export default function ReactSplitterMultiplePanels() {
  return (
    <div className="h-64 w-full rounded-md border border-border bg-background">
      <Splitter panels={[{ id: 'a' }, { id: 'b' }, { id: 'c' }]}>
        <SplitterPanel id="a" className="flex items-center justify-center">
          <span className="text-sm font-medium">A</span>
        </SplitterPanel>
        <SplitterResizeTrigger id="a:b">
          <SplitterResizeTriggerIndicator />
        </SplitterResizeTrigger>
        <SplitterPanel id="b" className="flex items-center justify-center">
          <span className="text-sm font-medium">B</span>
        </SplitterPanel>
        <SplitterResizeTrigger id="b:c">
          <SplitterResizeTriggerIndicator />
        </SplitterResizeTrigger>
        <SplitterPanel id="c" className="flex items-center justify-center">
          <span className="text-sm font-medium">C</span>
        </SplitterPanel>
      </Splitter>
    </div>
  );
}

<!-- apps/docs/src/components/examples/splitter/multiple-panels/svelte.svelte -->
<script lang="ts">
  import {
    Splitter,
    SplitterPanel,
    SplitterResizeTrigger,
    SplitterResizeTriggerIndicator,
  } from '@cloudvoyant/helical-svelte';
</script>

<div class="h-64 w-full rounded-md border border-border bg-background">
  <Splitter panels={[{ id: 'a' }, { id: 'b' }, { id: 'c' }]}>
    <SplitterPanel id="a" class="flex items-center justify-center">
      <span class="text-sm font-medium">A</span>
    </SplitterPanel>
    <SplitterResizeTrigger id="a:b">
      <SplitterResizeTriggerIndicator />
    </SplitterResizeTrigger>
    <SplitterPanel id="b" class="flex items-center justify-center">
      <span class="text-sm font-medium">B</span>
    </SplitterPanel>
    <SplitterResizeTrigger id="b:c">
      <SplitterResizeTriggerIndicator />
    </SplitterResizeTrigger>
    <SplitterPanel id="c" class="flex items-center justify-center">
      <span class="text-sm font-medium">C</span>
    </SplitterPanel>
  </Splitter>
</div>

Vertical

// apps/docs/src/components/examples/splitter/vertical/react.tsx
import {
  Splitter,
  SplitterPanel,
  SplitterResizeTrigger,
  SplitterResizeTriggerIndicator,
} from '@cloudvoyant/helical-react';

export default function ReactSplitterVertical() {
  return (
    <div className="h-64 w-full rounded-md border border-border bg-background">
      <Splitter orientation="vertical" panels={[{ id: 'a' }, { id: 'b' }]}>
        <SplitterPanel id="a" className="flex items-center justify-center">
          <span className="text-sm font-medium">A</span>
        </SplitterPanel>
        <SplitterResizeTrigger id="a:b">
          <SplitterResizeTriggerIndicator />
        </SplitterResizeTrigger>
        <SplitterPanel id="b" className="flex items-center justify-center">
          <span className="text-sm font-medium">B</span>
        </SplitterPanel>
      </Splitter>
    </div>
  );
}

<!-- apps/docs/src/components/examples/splitter/vertical/svelte.svelte -->
<script lang="ts">
  import {
    Splitter,
    SplitterPanel,
    SplitterResizeTrigger,
    SplitterResizeTriggerIndicator,
  } from '@cloudvoyant/helical-svelte';
</script>

<div class="h-64 w-full rounded-md border border-border bg-background">
  <Splitter orientation="vertical" panels={[{ id: 'a' }, { id: 'b' }]}>
    <SplitterPanel id="a" class="flex items-center justify-center">
      <span class="text-sm font-medium">A</span>
    </SplitterPanel>
    <SplitterResizeTrigger id="a:b">
      <SplitterResizeTriggerIndicator />
    </SplitterResizeTrigger>
    <SplitterPanel id="b" class="flex items-center justify-center">
      <span class="text-sm font-medium">B</span>
    </SplitterPanel>
  </Splitter>
</div>

API Reference

Both packages expose flat Splitter, SplitterPanel, SplitterResizeTrigger, and SplitterResizeTriggerIndicator exports. Each part accepts all the corresponding Ark splitter props plus className/class.

Sizing note: Ark sets height: 100% and width: 100% inline on the root, so wrap the Splitter in a container with an explicit height such as <div className="h-64">.

Splitter

Props

Prop	Type	Default	Description
`panels`	`PanelData[]`	—	Required. Each panel’s id plus optional `minSize`, `maxSize`, `collapsible`, `collapsedSize`.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Split axis.
`defaultSize` / `size`	`PanelSize[]`	—	Initial or controlled panel sizes.

SplitterResizeTrigger

Props

Prop	Type	Default	Description
`id`	`'a:b'`	—	Which two panel ids this handle separates.
`disabled`	`boolean`	—	Disables resizing across this handle.

Accessibility

Ark renders the resize handle as a role="separator" button with aria-orientation, aria-valuenow, and keyboard support (arrow keys resize, Home/End jump to min/max).