Splitter

Splitter with collapsible panels, drag handle, and smooth animations.

Build with ScrollX AI

Describe your website idea and let AI generate a layout.

Your Website Preview

Once you generate, the website preview will appear here.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/splitter.json

Usage

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

<Splitter>
  <SplitterPanel className="bg-muted/40 border-r">
  </SplitterPanel>
  <SplitterPanel className="bg-background flex items-center justify-center">
  </SplitterPanel>
</Splitter>

API Reference

Splitter

Splitter with collapsible panels, drag handle, and smooth animations.

Props

Property	Type	Default	Description
`children`	ReactNode	`required`	Two SplitterPanel components and optionally a SplitterHandle.
`onResize`	(leftSize: number, rightSize: number) => void	`undefined`	Callback fired when panels are resized, returns left and right widths in %.
`allowFullCollapse`	boolean	`true`	Allow panels to collapse completely to 0% or 100%.
`minSize`	number	`0`	Minimum percentage width of the left panel.
`maxSize`	number	`100`	Maximum percentage width of the left panel.
`defaultSize`	number	`50`	Initial percentage width of the left panel.
`snapThreshold`	number	`5`	Percentage threshold to snap panels fully collapsed.
`smoothTransition`	boolean	`true`	Enable smooth animated transitions when resizing.
`className`	string	`-`	Additional CSS classes for styling the root Splitter.
`style`	React.CSSProperties	`-`	Inline styles applied to the root Splitter.