Example

Two-column split layout with flexible ratios for hero sections, features, and content blocks

Equal Columns
Left Column
Equal width column

This column takes up 50% of the available width. Perfect for balanced content presentation.

Right Column
Equal width column

This column also takes up 50% of the available width. Great for features, comparisons, or balanced layouts.

<Split left={<LeftContent />} right={<RightContent />} ratio="1/1" />
Emphasis Left
Main Content (2x width)
Wider column for primary content

This column is twice as wide as the right column. Perfect for main content with a sidebar, or emphasizing the primary content.

Sidebar (1x width)
Narrower column

Smaller column for secondary content.

<Split left={<MainContent />} right={<Sidebar />} ratio="2/1" />
Emphasis Right
Sidebar (1x width)
Narrower column

Smaller column for navigation or metadata.

Main Content (2x width)
Wider column for primary content

This column is twice as wide as the left column. Great for emphasizing content on the right side.

Feature 1
Feature 2
Feature 3
Feature 4
<Split left={<Sidebar />} right={<MainContent />} ratio="1/2" />
With minHeight

Hero Content

Use the Split layout for hero sections with text on one side and visuals on the other. The minHeight prop ensures the section takes up sufficient viewport space.

🎨

Visual Content / Image Placeholder

<Split
  left={<HeroText />}
  right={<HeroImage />}
  ratio="1/1"
  minHeight="400px"
/>
Available Props
Customize the Split layout behavior
leftReact.ReactNoderequired

Left panel content

rightReact.ReactNoderequired

Right panel content

ratio"1/1" | "2/1" | "1/2" | "1/3" | "3/1"default: "1/1"

Column ratio

stackBelow"sm" | "md" | "lg" | "xl" | "2xl"default: "lg"

Breakpoint below which columns stack vertically

gapstringdefault: "gap-8"

Gap between columns (Tailwind class)

minHeightstring

Minimum height for the split layout (CSS value)

reverseStackbooleandefault: false

Reverse stack order on mobile (right panel first)

Hero Sections
Content + visual split

Text and CTA on one side, hero image or illustration on the other.

Feature Showcases
Alternating content blocks

Alternate between image-left and image-right layouts for visual interest.

Comparisons
Side-by-side comparison

Compare two products, plans, or options with equal-width columns.

Content + Sidebar
Asymmetric layouts

Main content with related information or CTAs in a narrower column.