Splitter

Resizable split panes with a draggable handle, min/max limits, and full keyboard resizing.

Explorer

▾ app

layout.tsx

page.tsx

▾ components

hero.tsx

pricing.tsx

▾ lib

utils.ts

package.json

page.tsxlayout.tsx

1import { Hero } from "@/components/hero";
2import { Pricing } from "@/components/pricing";
3
4export default function Page() {
5  return (
6    <main className="grid gap-24">
7      <Hero title="Ship faster" />
8      <Pricing plans={3} />
9    </main>
10  );
11}

Terminal

➜ ~/site npm run dev

▲ Next.js 16 ready on http://localhost:3000

✓ Compiled /page in 184ms

Open

direction

defaultSize28

minSize15

maxSize85

step5

label

Installation

npx shadcn@latest add @glint-ui/splitter

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/splitter.json

Usage

import { Splitter } from "@/components/ui/splitter";

<Splitter
  defaultSize={30}
  minSize={15}
  maxSize={70}
  start={<Sidebar />}
  end={<Content />}
/>

Props

Prop	Type	Default	Description
start	ReactNode	—	First pane (left or top).
end	ReactNode	—	Second pane (right or bottom).
direction	"horizontal" \| "vertical"	"horizontal"	Side by side or stacked.
defaultSize	number	28	Initial size of the first pane, in %.
minSize	number	15	Smallest first pane, in %.
maxSize	number	85	Largest first pane, in %.
step	number	5	% per arrow key press (Shift = 4x).
label	string	"Resize panels"	Accessible name of the handle.
onResize	ReactNode	—	Called with the new size (%) after a drag or key press.
className	string	—	Extra classes for the root element.