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.