Browse components
Splitters
React splitter components for resizable dashboards, editors, and workspace layouts.
A clean side-by-side React splitter for inboxes, editors, and dashboard layouts.
A stacked React splitter for charts, activity feeds, consoles, and detail panels.
A flexible React splitter layout with an independent sidebar and stacked workspace panels.
About Splitters Components
Splitter components divide a workspace into resizable panels so people can control how much room each area receives. They work well in dashboards, inboxes, editors, data tools, and admin interfaces.
Each React splitter supports pointer and keyboard resizing, sensible minimum sizes, and a double-click reset. Use the horizontal, vertical, or nested layout as a starting point for your product.
Frequently asked questions
What is a React splitter?
A React splitter is a layout component that places two or more panels beside or above each other and lets people resize them with a draggable handle.
Where should I use a splitter component?
Splitters are useful in dashboards, code editors, inboxes, file browsers, analytics tools, and other interfaces where people compare or manage content across panels.
Can these splitters be resized with a keyboard?
Yes. Focus the handle and use the arrow keys to resize, hold Shift for larger steps, or press Home and End to jump to the minimum and maximum sizes.