Browse components
Vertical React Splitter
A stacked React splitter for charts, activity feeds, consoles, and detail 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/vertical-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 |
|---|---|---|
topPanel | ReactNode | Content for the top panel |
bottomPanel | ReactNode | Content for the bottom panel |
defaultSize | number | Initial height of the top panel as a percentage |
ariaLabel | string | Accessible label for the resize handle |
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.
Navigation
Workspace
Console
A flexible React splitter layout with an independent sidebar and stacked workspace panels.