Split

Use Split

Split is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Split, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Split side="end" ratio="main" collapseAt="md" main={<Text as="p">Main content</Text>} aside={<Text as="p">Supporting content</Text>} />
    </FloodRoot>
  );
}

Design notes

• main and aside are content slots in generic div panes; they do not introduce duplicate main landmarks. side places the supporting pane at logical start/end and preserves the same DOM reading order. ratio chooses equal panes or a 2:1 emphasis on main/aside.
• Container queries collapse at sm=30rem, md=48rem or lg=64rem; never retains two columns. gap uses the spacing scale. This is layout composition, with no resizing gesture, saved pane sizes or splitter keyboard model.
• Original compatible addition in the unpublished 0.2.5 source candidate.

API reference