# Split

A responsive main-and-supporting layout with logical pane placement and container-based collapse.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `main` | `ReactNode` | `Required` |
| `aside` | `ReactNode` | `Required` |
| `side` | `"start" \| "end"` | `"end"` |
| `ratio` | `"balanced" \| "main" \| "aside"` | `"main"` |
| `collapseAt` | `"sm" \| "md" \| "lg" \| "never"` | `"md"` |
| `gap` | `"0" \| "1" \| "2" \| "3" \| "4" \| "6" \| "8" \| "12"` | `"6"` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | `Forwarded` |