Current · v2.4
A clear view of the evidence
Keep source material and review notes together, with the approval history close at hand.
Workspace review · Updated today
Split Pane Divider
A free resizable split pane for product and design reviews.
Proposal · v2.5
Keep context beside the decision
Give reviewers room to compare a proposed change without leaving its source.
Workspace review · Updated today
Customise
20%
80%
Code
<SplitPaneDivider
firstLabel="Current version"
secondLabel="Proposed version"
label="Resize version comparison"
first={<div>Current product view</div>}
second={<div>Proposed product view</div>}
/>Split Pane Divider is a free React layout component for Next.js and Tailwind that keeps two product or design views visible as you compare them. A bounded separator responds to pointer dragging and keyboard input, while both panes retain their content and reading order.
Set controlled or initial proportions, choose a vertical or horizontal split, and provide meaningful pane labels. The server-rendered fallback shows both panes at equal size; after hydration the separator exposes its current limits and value to assistive technology.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/split-pane-dividerUsage
import { SplitPaneDivider } from "@/components/split-pane-divider";
export function ReviewComparison() {
return (
<SplitPaneDivider
firstLabel="Current design"
secondLabel="Proposed design"
label="Resize design comparison"
first={<CurrentDesign />}
second={<ProposedDesign />}
min={30}
max={70}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| first | ReactNode | required | Content in the leading pane. |
| second | ReactNode | required | Content in the trailing pane. |
| value | number | undefined | Controlled leading-pane percentage. |
| defaultValue | number | 50 | Initial leading-pane percentage in uncontrolled mode. |
| onValueChange | (value: number) => void | undefined | Called after pointer or keyboard input requests a valid percentage. |
| min | number | 20 | Lower bound for the first pane percentage. |
| max | number | 80 | Upper bound for the first pane percentage. |
| orientation | "vertical" | "horizontal" | "vertical" | Vertical places panes side by side; horizontal places them top and bottom. |
| label | string | "Resize panes" | Accessible separator name. |
| firstLabel | string | "First pane" | Accessible name for the leading pane region. |
| secondLabel | string | "Second pane" | Accessible name for the trailing pane region. |
| className | string | undefined | Classes merged onto the outer grid. |
Customisation
The component owns separator behaviour and the layout grid, while consumers own the pane content and its styling. Use className to set the overall stage size and let each pane's content provide its own surface, type and spacing. The divider uses semantic border and focus-ring tokens from the nearest theme.
<SplitPaneDivider
className="min-h-[32rem] rounded-3xl"
firstLabel="Source"
secondLabel="Review"
first={<SourcePanel />}
second={<ReviewPanel />}
/>Frequently asked questions
- Is Split Pane Divider free for commercial use?
- Yes. Split Pane Divider is MIT licensed for personal and commercial projects.
- Can I resize the panes without a mouse?
- Yes. Focus the separator and use the matching arrow keys to adjust it, Shift with an arrow to move five percentage points, or Home and End to reach the configured bounds.
- Can I use this for an image wipe?
- The component keeps both panes visible and changes their layout proportions. For a reveal that clips one image over another, use a before and after slider instead.