Split

Horizontal

Two panels side by side — a fixed width in pixels and the rest 1fr.

Fixed

Rest

tsx

import { Split } from "~/components/ui/base/split";

<Split.Root direction="horizontal" class="h-32 rounded-lg border border-separator-opaque">
  <Split.Panel size="120px" class="bg-surface-raised p-3 text-callout">
    Fixed
  </Split.Panel>
  <Split.Panel size="1fr" class="bg-surface-overlay p-3 text-callout">
    Rest
  </Split.Panel>
</Split.Root>

Vertical

Vertical panels: the top one with a fixed height, the bottom one fills the rest.

Top

Bottom

tsx

import { Split } from "~/components/ui/base/split";

<Split.Root direction="vertical" class="h-48 rounded-lg border border-separator-opaque">
  <Split.Panel size="4rem" class="bg-surface-raised p-2 text-caption-1">Top</Split.Panel>
  <Split.Panel size="1fr" class="bg-surface-overlay p-2 text-caption-1">Bottom</Split.Panel>
</Split.Root>

Metadata

Source: meta.generated.json (see npm run generate)

File base/split/meta.generated.json not found or path not allowed.