Tailwind CSS Split Pane Components

Dev Design Library indexes 31 Tailwind CSS split pane components from 18 open-source UI libraries, with the most coming from ReUI, Shadcn Space, ObsidianUI, shadcn/ui and SpaceUI. 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 styles its components with Tailwind CSS utility classes. Split pane components belong to the Layout group.

• Resizableshadcn/ui · ReactAccessible resizable panel groups and layouts with keyboard support.
• Layout SplitterPreline UI · JavaScript (HTML + Tailwind)
• Horizontal resizable layoutReUI · ReactHorizontal resizable layout
• 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.
• 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.
• 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.
• Resizable 02 - Horizontal SplitShadcn Space · ReactA simple horizontal resizable layout with a sidebar and content panel.
• Split ShowcaseObsidianUI · React
• 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 Tailwind CSS split pane components

• ReUI
• Shadcn Space
• ObsidianUI
• shadcn/ui
• SpaceUI

Related categories

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