Split Pane Components

Dev Design Library indexes 39 split pane components from 24 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. 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…
• Layout SplitterPreline UI · JavaScript (HTML + Tailwind)
• 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

Libraries with split pane components

• ReUI
• Shadcn Space
• ObsidianUI
• Lobe UI
• ReScript shadcn

Related categories

• React Split Pane Components
• Tailwind CSS Split Pane Components
• Animated Split Pane Components
• Layout Components
• Grid Components
• Bento Grid Components
• Separator Components
• Stack Components
• App Shell Components
• Container Components
• Scroll Area Components
• Window Frame Components
• Aspect Ratio Components
• Sticky Scroll Components
• Masonry Components
• Dashboard Grid Components