Resizable
Accessible resizable panel groups and layouts with keyboard support.
Resizable wraps
react-resizable-panels in
a group, a panel and a draggable divider. Each divider is a separator with a
focus ring and arrow-key support. It is not a Port: coss/ui has no counterpart,
so the panel surface and radius come from Card and the divider from Separator.
Installation
npx shadcn@latest add @kosori/resizableExample
resizable-example.tsx
One
Two
Three
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from '@/components/ui/resizable';
const ResizableExample = () => (
<div className='h-64 w-full max-w-md'>
<ResizablePanelGroup>
<ResizablePanel>
<div className='flex h-full items-center justify-center p-6'>
<span className='font-medium text-sm'>One</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel>
<div className='flex h-full items-center justify-center p-6'>
<span className='font-medium text-sm'>Two</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel>
<div className='flex h-full items-center justify-center p-6'>
<span className='font-medium text-sm'>Three</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
);
export default ResizableExample;
Usage
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from '@/components/ui/resizable';
const ResizableDemo = () => (
<div className='h-64 w-full max-w-md'>
<ResizablePanelGroup>
<ResizablePanel>One</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>
</div>
);A divider takes focus and resizes with the arrow keys. Pass withHandle to
render the visible grab affordance.