Split

Two columns at a set proportion that stack below a breakpoint. Sidebars, settings pages and media with text.

General

Workspace name, default region and the timezone used for reports.

1import { Split } from '@/components/ui/split';
2
3const links = ['General', 'Members', 'Billing', 'Integrations', 'Danger zone'];
4
5export function Default() {
6  return (
7    <Split
8      ratio="1/3"
9      collapse="sm"
10      className="border-border bg-card w-full max-w-lg rounded-xl border p-4"
11    >
12      <nav className="flex flex-col gap-1">
13        {links.map((link, index) => (
14          <a
15            key={link}
16            href="#"
17            className={
18              index === 0
19                ? 'bg-muted rounded-md px-3 py-1.5 text-sm font-medium'
20                : 'text-muted-foreground hover:text-foreground rounded-md px-3 py-1.5 text-sm'
21            }
22          >
23            {link}
24          </a>
25        ))}
26      </nav>
27      <div className="flex flex-col gap-2">
28        <p className="text-sm font-medium">General</p>
29        <p className="text-muted-foreground text-sm">
30          Workspace name, default region and the timezone used for reports.
31        </p>
32      </div>
33    </Split>
34  );
35}

Installation

pnpm dlx nachui add split

Anatomy

1import { Split } from '@/components/ui/split';

1<Split ratio="1/3" collapse="md" gap="8">
2  <nav>Sidebar</nav>
3  <main>Content</main>
4</Split>

Split is a two column grid. ratio is the share of the first column, collapse is the breakpoint below which the columns stack into one. Both children keep min-width: 0, so long content wraps instead of pushing the layout wider. It is different from Separator, which draws a line.

Examples

Default

A settings page: navigation on the left at one third, content on the right.

General

Workspace name, default region and the timezone used for reports.

1import { Split } from '@/components/ui/split';
2
3const links = ['General', 'Members', 'Billing', 'Integrations', 'Danger zone'];
4
5export function Default() {
6  return (
7    <Split
8      ratio="1/3"
9      collapse="sm"
10      className="border-border bg-card w-full max-w-lg rounded-xl border p-4"
11    >
12      <nav className="flex flex-col gap-1">
13        {links.map((link, index) => (
14          <a
15            key={link}
16            href="#"
17            className={
18              index === 0
19                ? 'bg-muted rounded-md px-3 py-1.5 text-sm font-medium'
20                : 'text-muted-foreground hover:text-foreground rounded-md px-3 py-1.5 text-sm'
21            }
22          >
23            {link}
24          </a>
25        ))}
26      </nav>
27      <div className="flex flex-col gap-2">
28        <p className="text-sm font-medium">General</p>
29        <p className="text-muted-foreground text-sm">
30          Workspace name, default region and the timezone used for reports.
31        </p>
32      </div>
33    </Split>
34  );
35}

Ratios

auto sizes the first column to its content, auto-end does the same for the second.

1/2

rest

1/3

rest

2/3

rest

1/4

rest

auto

rest

1import { Split, type SplitRatio } from '@/components/ui/split';
2
3const ratios: SplitRatio[] = ['1/2', '1/3', '2/3', '1/4', 'auto'];
4
5export function Ratios() {
6  return (
7    <div className="flex w-full max-w-md flex-col gap-3">
8      {ratios.map((ratio) => (
9        <Split key={ratio} ratio={ratio} collapse="none" gap="2">
10          <div className="bg-primary/10 text-primary rounded-md px-3 py-2 font-mono text-xs">
11            {ratio}
12          </div>
13          <div className="bg-muted text-muted-foreground rounded-md px-3 py-2 font-mono text-xs">
14            rest
15          </div>
16        </Split>
17      ))}
18    </div>
19  );
20}

Reverse

reverse moves the first child below the second when the columns stack, for an image that should lead on mobile but sit beside the text on desktop.

Preview every branch

Each pull request gets its own URL, seeded with a copy of staging data. On small screens the image moves above this text.

1import { AspectRatio } from '@/components/ui/aspect-ratio';
2import { Split } from '@/components/ui/split';
3
4export function Reverse() {
5  return (
6    <Split ratio="1/2" collapse="sm" align="center" reverse className="w-full max-w-lg">
7      <div className="flex flex-col gap-2">
8        <p className="text-lg font-semibold">Preview every branch</p>
9        <p className="text-muted-foreground text-sm">
10          Each pull request gets its own URL, seeded with a copy of staging data. On small screens
11          the image moves above this text.
12        </p>
13      </div>
14      <AspectRatio ratio={4 / 3} className="rounded-lg">
15        <img src="https://picsum.photos/seed/split/640/480" alt="Preview deployment" />
16      </AspectRatio>
17    </Split>
18  );
19}

API Reference

Split

Prop	Type	Default	Description
`ratio`	`'1/2' \| '1/3' \| '2/3' \| '1/4' \| '3/4' \| 'auto' \| 'auto-end'`	`'1/2'`	Share of the first column
`collapse`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Below this breakpoint the columns stack
`gap`	`'0' \| '2' \| '3' \| '4' \| '6' \| '8' \| '10' \| '12' \| '16'`	`'6'`	Gap between the columns
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	`'stretch'`	Vertical alignment of the columns
`reverse`	`boolean`	`false`	Put the first child last while stacked
`as`	`React.ElementType`	`'div'`	Element to render
`className`	`string`	-	Additional CSS classes

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousSpacer

NextSection