Splitter Three Pane

FreeNew

A navigator, list and detail layout with three resizable panes where each handle only trades space with its neighbour and every pane keeps a minimum.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this when the work has three levels of hierarchy shown at once: mail, file managers, API explorers, data catalogues.

Do not use it when the screen is narrow or touch-first (show one level at a time with navigation).

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/splitter-three-pane.json

It composes splitter, which the CLI installs for you.

Usage

import { SplitterThreePane } from "@/components/splitter-three-pane"

<SplitterThreePane
  navigator={<Folders />}
  list={<Messages />}
  detail={<Reader />}
/>

Props

Prop	Type	Required	Description
`navigator`	`React.ReactNode`	required	-
`list`	`React.ReactNode`	required	-
`detail`	`React.ReactNode`	required	-
`defaultSizes`	`[number, number, number]`	optional	Initial sizes in percent. Default 20, 30, 50.

Accessibility

Each pane is a labelled region and each handle names the pane it resizes.
A handle only trades space with its neighbour.
Minimum sizes keep every pane readable.

Testing

The pattern ships with a Testing Library test (splitter-three-pane.test.tsx) that covers three regions with two named handles, moving one border and the minimums.

Guide and examples

When to use it

Use this when the work has three levels of hierarchy shown at once: mail, file managers, API explorers, data catalogues.

Do not use it when the screen is narrow or touch-first (show one level at a time with navigation).

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/splitter-three-pane.json

It composes splitter, which the CLI installs for you.

Usage

import { SplitterThreePane } from "@/components/splitter-three-pane"

<SplitterThreePane
  navigator={<Folders />}
  list={<Messages />}
  detail={<Reader />}
/>

Props

Prop	Type	Required	Description
`navigator`	`React.ReactNode`	required	-
`list`	`React.ReactNode`	required	-
`detail`	`React.ReactNode`	required	-
`defaultSizes`	`[number, number, number]`	optional	Initial sizes in percent. Default 20, 30, 50.

Accessibility

Each pane is a labelled region and each handle names the pane it resizes.
A handle only trades space with its neighbour.
Minimum sizes keep every pane readable.

Testing

The pattern ships with a Testing Library test (splitter-three-pane.test.tsx) that covers three regions with two named handles, moving one border and the minimums.