Resizable

Accessible resizable panel groups and layouts with keyboard support.

One

Two

Three

"use client";

import { styled } from "styled-system/jsx";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

export default function ResizableDemo() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      css={{ maxW: "md", rounded: "lg", borderWidth: "1px", md: { minW: "450px" } }}
    >
      <ResizablePanel defaultSize={50}>
        <styled.div
          css={{
            display: "flex",
            h: "200px",
            alignItems: "center",
            justifyContent: "center",
            p: "6",
          }}
        >
          <styled.span css={{ fontWeight: "semibold" }}>One</styled.span>
        </styled.div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        <ResizablePanelGroup direction="vertical">
          <ResizablePanel defaultSize={25}>
            <styled.div
              css={{
                display: "flex",
                h: "full",
                alignItems: "center",
                justifyContent: "center",
                p: "6",
              }}
            >
              <styled.span css={{ fontWeight: "semibold" }}>Two</styled.span>
            </styled.div>
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel defaultSize={75}>
            <styled.div
              css={{
                display: "flex",
                h: "full",
                alignItems: "center",
                justifyContent: "center",
                p: "6",
              }}
            >
              <styled.span css={{ fontWeight: "semibold" }}>Three</styled.span>
            </styled.div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

About

The Resizable component is built on top of react-resizable-panels by bvaughn.

Installation

npx nore-ui-cli@latest add 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

"use client";

import { styled } from "styled-system/jsx";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

export default function ResizableVertical() {
  return (
    <ResizablePanelGroup
      direction="vertical"
      css={{ minH: "200px", maxW: "md", rounded: "lg", borderWidth: "1px", md: { minW: "450px" } }}
    >
      <ResizablePanel defaultSize={25}>
        <styled.div
          css={{
            display: "flex",
            h: "full",
            alignItems: "center",
            justifyContent: "center",
            p: "6",
          }}
        >
          <styled.span css={{ fontWeight: "semibold" }}>Header</styled.span>
        </styled.div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={75}>
        <styled.div
          css={{
            display: "flex",
            h: "full",
            alignItems: "center",
            justifyContent: "center",
            p: "6",
          }}
        >
          <styled.span css={{ fontWeight: "semibold" }}>Content</styled.span>
        </styled.div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

With Handle

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

Sidebar

Content

"use client";

import { styled } from "styled-system/jsx";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

export default function ResizableDemo() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      css={{ minH: "200px", maxW: "md", rounded: "lg", borderWidth: "1px", md: { minW: "450px" } }}
    >
      <ResizablePanel defaultSize={25}>
        <styled.div
          css={{
            display: "flex",
            h: "full",
            alignItems: "center",
            justifyContent: "center",
            p: "6",
          }}
        >
          <styled.span css={{ fontWeight: "semibold" }}>Sidebar</styled.span>
        </styled.div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={75}>
        <styled.div
          css={{
            display: "flex",
            h: "full",
            alignItems: "center",
            justifyContent: "center",
            p: "6",
          }}
        >
          <styled.span css={{ fontWeight: "semibold" }}>Content</styled.span>
        </styled.div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}