Resizable

Accessible resizable panel groups and layouts with keyboard support.

Preview

One

Two

Three

Code

import Resizable from '@dinui/react/resizable'

export default function ResizableDemo() {
  return (
    <Resizable direction="horizontal" className="max-w-md rounded-lg border">
      <Resizable.Panel defaultSize={50}>
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">One</span>
        </div>
      </Resizable.Panel>

      <Resizable.Handle />

      <Resizable.Panel defaultSize={50}>
        <Resizable direction="vertical">
          <Resizable.Panel defaultSize={25}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Two</span>
            </div>
          </Resizable.Panel>

          <Resizable.Handle />

          <Resizable.Panel defaultSize={75}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Three</span>
            </div>
          </Resizable.Panel>
        </Resizable>
      </Resizable.Panel>
    </Resizable>
  )
}

About

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

Vertical

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

Preview

Header

Content

Code

import Resizable from '@dinui/react/resizable'

export default function ResizableDemo() {
  return (
    <Resizable direction="vertical" className="min-h-[200px] max-w-md rounded-lg border">
      <Resizable.Panel defaultSize={25}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Header</span>
        </div>
      </Resizable.Panel>

      <Resizable.Handle withIndicator />

      <Resizable.Panel defaultSize={75}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Content</span>
        </div>
      </Resizable.Panel>
    </Resizable>
  )
}

With Indicator

Preview

Sidebar

Content

Code

import Resizable from '@dinui/react/resizable'

export default function ResizableDemo() {
  return (
    <Resizable direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
      <Resizable.Panel defaultSize={25}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Sidebar</span>
        </div>
      </Resizable.Panel>

      <Resizable.Handle withIndicator />

      <Resizable.Panel defaultSize={75}>
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Content</span>
        </div>
      </Resizable.Panel>
    </Resizable>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add resizable

   yarn

   yarn dlx @dinui/cli@latest add resizable

   pnpm

   pnpm dlx @dinui/cli@latest add resizable

   bun

   bunx @dinui/cli@latest add resizable

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @tabler/icons-react react-resizable-panels tailwind-variants type-fest react-resizable-panels

   yarn

   yarn add @tabler/icons-react react-resizable-panels tailwind-variants type-fest react-resizable-panels

   pnpm

   pnpm add @tabler/icons-react react-resizable-panels tailwind-variants type-fest react-resizable-panels

   bun

   bun add @tabler/icons-react react-resizable-panels tailwind-variants type-fest react-resizable-panels

3. Copy and paste the following code into your project

   'use client'
   
   import { IconGripVertical } from '@tabler/icons-react'
   import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const resizable = tv({
     slots: {
       root: 'flex data-[panel-group-direction=vertical]:flex-col',
       handle: [
         'relative flex w-px items-center justify-center bg-border',
         'focus-visible:outline-1',
         'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full',
         '[&[data-panel-group-direction=vertical]_[data-el=indicator]]:rotate-90',
       ],
       handleIndicator:
         'z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-bg--contrast',
       handleIndicatorIcon: 'size-2.5',
     },
   })
   
   function ResizableRoot(props: React.ComponentProps<typeof PanelGroup>) {
     const { root } = resizable()
   
     return <PanelGroup {...props} className={root({ className: props.className })} />
   }
   
   function ResizableHandle({
     indicatorProps,
     indicatorIconProps,
     withIndicator,
     ...props
   }: Merge<
     React.ComponentProps<typeof PanelResizeHandle>,
     {
       withIndicator?: boolean
       indicatorProps?: React.ComponentProps<'div'>
       indicatorIconProps?: React.ComponentProps<typeof IconGripVertical>
     }
   >) {
     const { handle, handleIndicator, handleIndicatorIcon } = resizable()
   
     return (
       <PanelResizeHandle {...props} className={handle({ className: props.className })}>
         {withIndicator && (
           <div
             {...indicatorProps}
             data-el="indicator"
             className={handleIndicator({ className: indicatorProps?.className })}
           >
             <IconGripVertical
               {...indicatorIconProps}
               className={handleIndicatorIcon({ className: indicatorIconProps?.className })}
             />
           </div>
         )}
       </PanelResizeHandle>
     )
   }
   
   const Resizable = Object.assign(ResizableRoot, {
     Panel,
     Handle: ResizableHandle,
   })
   
   export default Resizable
   export { resizable }
   export * as ResizablePrimitive from 'react-resizable-panels'

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.