React Splitter

  • Flexible and fully accessible yet simple React Splitter component: resize, collapse or scroll any pane (content area).
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.


The React Splitter enables developers to define sections of a page in a column and row structure. Each section can also be resized by simply dragging the provided handlers, and can be expanded and collapsed.

See React Splitter Overview demo

React Splitter - Overview, KendoReact UI Library


Panes are at the heart of the KendoReact Splitter. Each content area of the React Splitter is a Pane, and each Pane has options to help define dimensions and allow for resizing, collapsing or scrolling on a pane-by-pane basis.

See React Splitter Panes demo

React Splitter - Panes, KendoReact UI Library


The KendoReact Splitter allows for each Pane to be arranged either horizontally or vertically.

See React Splitter Orientation demo

React Splitter - Orientation, KendoReact UI Library

Keyboard Navigation

With its built-in Keyboard Navigation, the KendoReact Splitter allows users to navigate between panes and use keyboard interactions to resize panes.

See React Splitter Keyboard Navigation demo


The KendoReact Splitter is compliant with Section 508 and WAI-ARIA standards, and is AAA rated with WCAG 2.0.

See React Splitter Accessibility demo

React Splitter - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.