Notion UIResizable
Accessible resizable panel groups and layouts with keyboard support.
Installation
pnpm add @notion-kit/uiAPI Reference
ResizableHandle
| Prop | Type | Default | Description |
|---|---|---|---|
withHandle | boolean | true | Whether the handle icon should be shown. |
Accessible resizable panel groups and layouts with keyboard support.
pnpm add @notion-kit/ui| Prop | Type | Default | Description |
|---|---|---|---|
withHandle | boolean | true | Whether the handle icon should be shown. |
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@notion-kit/ui/primitives";
export default function Demo() {
return (
<ResizablePanelGroup
direction="horizontal"
className="max-w-md rounded-lg border md:min-w-[450px]"
>
<ResizablePanel defaultSize={50}>
<div className="flex h-[200px] items-center justify-center p-6">
<span className="font-semibold">One</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={50}>
<ResizablePanelGroup direction="vertical">
<ResizablePanel defaultSize={25}>
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Two</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={75}>
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Three</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
);
}
pnpm add @notion-kit/ui