Resizable

Accessible resizable panel groups and layouts with keyboard support.

Docs

API Reference

Dependencies

react-resizable-panels: v2.1.4

One

Two

Three

Installation

npx @kosori/cli add components resizable

Usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '~/components/ui/resizable';

<ResizablePanelGroup direction='horizontal'>
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

Examples

Vertical

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

Header

Content

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '~/components/ui/resizable';
 
export const Example = () => {
  return (

    <ResizablePanelGroup direction='vertical'>
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  );
};

Handle

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

Sidebar