Resizable Horizontal Split - Horizontal split

Free

Basic horizontal ResizablePanelGroup with two equal panels.

Shadcn Resizable Horizontal Split component

Component Data

  • ID:resizable/resizable-horizontal-split
  • Access:free
  • Created:May 23, 2026
  • Type:example

Resizable Horizontal Split component design & features

This example uses the shadcn Resizable component with a horizontal ResizablePanelGroup, two ResizablePanel children, and a ResizableHandle between them. Each panel uses defaultSize to start at 50% width.

Horizontal splits are the default layout for side-by-side content such as sidebars, split editors, and preview panes where users need to adjust the relative width of two regions.