Splitter

Two panels with a handle between them that people drag, or move with the keyboard, to share the space. Use it in work-heavy screens like a mail client, an editor with a preview or a query tool.

InstallationCopy Anchor Link

Set up Camaleo once (Installation), then import what you need. It renders on the client.

import { Splitter, SplitterPanel, SplitterHandle } from "@camaleo/react";

AnatomyCopy Anchor Link

The value is the size of the first panel, in percent; the second takes the rest. Give the splitter a height. Panels clip their content, so put a ScrollArea inside the ones that can grow.

ExamplesCopy Anchor Link

Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above. Drag a handle, or press Tab until one has a focus ring and use the arrow keys.

export function InvoiceTable({ rows, currency }: Props) {
  const total = useMemo(
    () => rows.reduce((sum, r) => sum + r.amount, 0),
    [rows],
  );
  return <Table caption={format(total, currency)} rows={rows} />;
}

$ pnpm test invoice-table
 ✓ renders one row per invoice (12 ms)
 ✓ formats the total in the customer's currency (4 ms)
 ✗ updates the total when the currency changes
   Expected "R$ 1.240,00", received "$1,240.00"
Tests: 1 failed, 2 passed, 3 total

In contextCopy Anchor Link

These are whole pieces of UI you can copy, in the skin you picked.

import { Table } from "@camaleo/react";

export function InvoiceTable({ rows }: Props) {
  return <Table rows={rows} />;
}

$ pnpm dev
 ▲ Ready on http://localhost:3000
 ✓ Compiled /invoices in 812 ms

GuidelinesCopy Anchor Link

PropsCopy Anchor Link

Styling hooksCopy Anchor Link

Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the splitter itself.

/* a thin line instead of a bar, without the grip */
.editor [data-slot="splitter"] {
  --cml-splitter-handle-size: 0.375rem;
  --cml-splitter-handle-bg: transparent;
}
.editor [data-slot="splitter-grip"] { display: none; }

AccessibilityCopy Anchor Link

• The handle is role="separator" with aria-valuenow, aria-valuemin (0, since Enter can collapse) and aria-valuemax in percent, and aria-controls pointing at the first panel.
• Name every handle after what it resizes ("Resize sidebar"); the default "Resize panel" is in English.
• Enter collapses the first panel, but few people know that key. When hiding a panel matters, also offer a button with aria-expanded.
• The panels don't stack on narrow screens by themselves. On a phone, switch to orientation="vertical" or show one panel at a time.

RelatedCopy Anchor Link