Skip to content
Nexus Application Design nadesign

SplitContent

<SplitContent> is a static two-column body — main content on the left, fixed-ratio sidebar on the right. Stacks vertically on mobile, splits at lg and up. Use inside PageContent for form-with-live-preview or form-with-hint-card patterns.

import from "@na/ui/components/SplitContent" ▶ Open in Storybook packages/ui/src/components/SplitContent.tsx

When to use

  • Edit form on the left, live preview on the right.
  • Form with side hints / explanations.
  • Any “main work area + reference column” pattern that doesn’t need resizing.

Don’t use SplitContent for: layouts with independently-scrolling columns (SplitScrollContent), persistent app chrome (TwoColumnLayout), or detail-page property panels (RightPanel).

Default

Configuration
Form fields go here…
Live preview
preview
 
<PageContent>
  <SplitContent sidebar={<LivePreview />} sidebarWidth="50%">
    <ConfigForm />
  </SplitContent>
</PageContent>

API

Prop Type Default Description
children * ReactNode — Main content (left column on desktop).
sidebar * ReactNode — Sidebar content (right column on desktop).
sidebarWidth "25%" | "30%" | "35%" | "40%" | "50%" "30%" Sidebar share at lg+. The body fills the remainder.
className string — Forwarded to the root flex container.

Design guidelines

✓ Do

  • Default sidebarWidth="30%" for hint cards, "50%" for live preview where the preview is the focus.
  • Place SplitContent inside PageContent — the page-level scroll is on PageContent.

✗ Don't

  • Use SplitContent on mobile-shaped pages. The layout collapses to single-column at <lg by design — verify the mobile order makes sense.
  • Put a long-running list on the right. Use SplitScrollContent if both sides need their own scroll.

Accessibility

  • Plain <div> semantic structure. The contents own their own roles.
  • Stacks naturally on mobile — no role / order changes.

▶ Open SplitContent stories in Storybook