Browse components
Nested React Splitter
A flexible React splitter layout with an independent sidebar and stacked workspace panels.
Add to your project
1Connect the Uniquel MCP
Connect Uniquel to your coding agent before using the component ID.
Connect MCP2Copy the component ID
MCP ID
component:splitters/nested-react-splitterWorks with your AI tools
Claude*
Codex*
Lovable
Base44
Figma Make
Replit*
Cursor*
v0* Compatible with most projects that use the default React/Next.js framework.
Built With
React
Tailwind CSSProps
| Prop | Type | Description |
|---|---|---|
sidebar | ReactNode | Content for the left sidebar |
topPanel | ReactNode | Content for the upper workspace |
bottomPanel | ReactNode | Content for the lower workspace |
defaultSidebarSize | number | Initial sidebar width as a percentage |
defaultTopSize | number | Initial upper panel height as a percentage |
minSize | number | Minimum size for either panel as a percentage |
showHandle | boolean | Shows or hides the small handle indicator on the divider |
className | string | Styles for the splitter container |
More Splitters Components
Left panel
Right panel
A clean side-by-side React splitter for inboxes, editors, and dashboard layouts.
Top panel
Bottom panel
A stacked React splitter for charts, activity feeds, consoles, and detail panels.