SplitLayout

Two-pane layout: stacked full-width panes below md, ratio-controlled side-by-side panes at md and above.

Shared

Defaults

Ratio 50/50

Ratio 40/60

Ratio 60/40

Ratio 33/67

Ratio 67/33

Gap sm

Gap md

Gap lg

Source

import { SplitLayout } from "@zudo-composer/ui";

<SplitLayout
  left={<aside>Supporting content</aside>}
  right={<main>Primary content</main>}
/>

Injected into the previews above. SplitLayout

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */