SplitLayout

Pro

Two-panel layout with resizable split.

layoutsplitpanels

Import

import { SplitLayout } from "@/components/ui";

Basic Usage

SplitLayout Preview

Left Panel

Navigation or list

Right Panel

Detail or content

Code

tsx

<SplitLayout
  left={
    <div className="p-4">
      <h2>Left Panel</h2>
      <p>Left content here</p>
    </div>
  }
  right={
    <div className="p-4">
      <h2>Right Panel</h2>
      <p>Right content here</p>
    </div>
  }
/>

Custom Ratio

Different split ratios

1<SplitLayout
2  ratio="30/70"
3  left={<Sidebar />}
4  right={<MainContent />}
5/>

Resizable

Allow user to resize panels

1<SplitLayout
2  resizable
3  left={<FileTree />}
4  right={<Editor />}
5/>

Email Client Layout

Common email app pattern

1<SplitLayout
2  ratio="30/70"
3  left={
4    <div className="h-full overflow-auto">
5      <SearchInput placeholder="Search emails..." />
6      <EmailList emails={emails} />
7    </div>
8  }
9  right={
10    <div className="h-full overflow-auto">
11      <EmailDetail email={selectedEmail} />
12    </div>
13  }
14/>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring