Browse components
Horizontal React Splitter
A clean side-by-side React splitter for inboxes, editors, and dashboard layouts.
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/horizontal-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 |
|---|---|---|
leftPanel | ReactNode | Content for the left panel |
rightPanel | ReactNode | Content for the right panel |
defaultSize | number | Initial width of the left 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
Top panel
Bottom panel
A stacked React splitter for charts, activity feeds, consoles, and detail panels.
Navigation
Workspace
Console
A flexible React splitter layout with an independent sidebar and stacked workspace panels.