Dev Design LibraryReact Split Pane Components
Dev Design Library indexes 38 React split pane components from 23 open-source UI libraries, with the most coming from ReUI, Shadcn Space, ObsidianUI, Lobe UI and ReScript shadcn. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. Split pane components belong to the Layout group.
Resizableshadcn/ui · ReactAccessible resizable panel groups and layouts with keyboard support.
SplitterChakra UI · ReactThe Splitter component allows users to resize panels by dragging a handle between them. It supports horizontal…
SplitterArk UI · ReactA component that divides your interface into resizable sections
Horizontal resizable layoutReUI · ReactHorizontal resizable layout
SplitterPark UI · ReactA layout component for creating resizable split panes and panels.
Draggable PanelLobe UI · ReactAn edge-anchored panel that can be resized by dragging, by keyboard, or collapsed. Built on motion values, so a drag…
ResizableTailGrids · ReactAccessible resizable panel groups and layouts with keyboard support.
ResizableVengeance UI · React
ResizableToolcraft · React
Resizable 01 - Master-Detail Split PaneShadcn Space · ReactA horizontal resizable layout featuring a searchable order list table on the left and a detailed order inspector panel…
ResizableShadcn Dashboard · React
ResizableObsidianUI · React
ResizableShark UI · ReactDivides the interface into resizable sections.
Resizable panelsArc Library · ReactTrade space between panes by dragging the divider between them.
ResizableHextaUI · ReactPanels you can drag apart, with a quiet divider that wakes up on hover, sizes that glide on reset or collapse, and…
Text Processing PanelLocalMode · ReactA two-column (stacked on mobile) single-input → single-output NLP shell: labeled textarea + live word count + optional…
ResizableCojeev UI · ReactDivides a region into panels whose relative sizes can be adjusted with a separator.
Split paneMetal UI · React + SwiftUITwo places with a divider you can move: dragged one to one, it snaps to the default size or shut on the part spring…
ResizableSpaceUI · ReactAllows users to adjust side-by-side workspace panels by dragging divider handles to fit their screen needs.
Aria ResizableReScript shadcn · ReScript
ResizableD2Studio UI · ReactAccessible resizable panel groups and layouts with keyboard support.
SplitterReactFrame · ReactResizable panels divided by draggable handles, with min/max size constraints, keyboard resizing, double-click reset…
Splitterark-cn · ReactA shadcn-style splitter component built with Ark UI primitives.
State-tracked resizable layout.ReUI · ReactState-tracked resizable layout.
Base Ui Draggable PanelLobe UI · React
Resizable 02 - Horizontal SplitShadcn Space · ReactA simple horizontal resizable layout with a sidebar and content panel.
Split ShowcaseObsidianUI · React
Base ResizableReScript shadcn · ReScript
Vertical resizable layout.ReUI · ReactVertical resizable layout.
Resizable 03 - Vertical SplitShadcn Space · ReactA simple vertical resizable layout with a header and content panel.
Nested mixed-direction resizable layout.ReUI · ReactNested mixed-direction resizable layout.
Resizable 04 - Nested PanelsShadcn Space · ReactA nested resizable layout combining horizontal and vertical panel groups for a header, sidebar, and content area.
Nested resizableReUI · ReactNested resizable
Handle with animated pill indicatorReUI · ReactHandle with animated pill indicator
Handle pill with spring scale on dragReUI · ReactHandle pill with spring scale on drag
Handle with large capsule expansion on dragReUI · ReactHandle with large capsule expansion on drag
Nested layout with animated pill handlesReUI · ReactNested layout with animated pill handles
Three-panel layout with animated pill handlesReUI · ReactThree-panel layout with animated pill handles