💠 Resizable

Accessible resizable panel groups and layouts with keyboard support.

Usage

The "Resizable Panel" component consists of panels or layout sections that users can resize dynamically. This functionality is particularly useful in user interfaces where the ability to adjust the size of different content areas on the fly enhances the user experience.

The component supports keyboard interactions, making it accessible to a wide range of users, including those who rely on keyboard navigation.

When to use

• Flexible content display: Use the Resizable Panel in interfaces where the size of content areas needs to be adjustable. For example, in dashboard layouts, sidebars in editors, or split views.
• User preference: Employ this component in applications where it is beneficial for users to adjust the layout to suit their preferences, such as in data analysis tools or code editors.
• Responsive design: Utilize Resizable Panels to enhance responsive design, allowing users to adjust the layout based on the device or screen size they are using.
• Accessibility: The keyboard support makes it suitable for applications that require accessibility compliance, ensuring that the UI can be navigated and used effectively with keyboard-only controls.

Avoid using the Resizable Panel in contexts where simplicity and layout stability are paramount, such as in fixed layouts, interfaces for mobile devices with limited space, or when the addition of resizable functionality does not significantly enhance the user experience.

About

The Resizable component is built on top of react-resizable-panels (opens in a new tab).

Examples

Vertical

Use the direction prop to set the direction of the resizable panels.

Handle

You can set or hide the handle by using the withHandle prop on the ResizableHandle component.

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: