Browse components
Nested React SplitterFree
A flexible React splitter layout with an independent sidebar and stacked workspace panels.
Add to your project
Checking access...
Works 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.