Splitter

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

Installation

npx shadcn@latest add @scrollxui/splitter

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.