Skip to Content
Dashflow Logo

Resizable Component

A comprehensive guide to using the Resizable component with examples, props, and best practices.

Overview

The Resizable component provides a flexible layout system with resizable panels. It allows users to adjust the size of different sections of the interface by dragging handles between panels.

Basic Usage

import { Resizable } from '@dashflowx/core'


export default function ResizableExample() {
  return (
    <Resizable 
      direction="horizontal" 
      className="max-w-md rounded-lg border"
      height="400px"
      panelCount={2}
    />
  )
}

Preview:

Panel One
Panel One
Panel Two
Panel One

Props

PropTypeDefaultDescription
direction'horizontal' | 'vertical''horizontal'Direction of the resizable layout
classNamestring-Additional CSS classes
heightstring-Height of the resizable container
typestring-Type of resizable layout
panelCountnumber2Number of panels to display
showHeaderbooleanfalseWhether to show a header
headerTitlestring'Resizable Layout'Title text for the header
headerClassNamestring-Additional CSS classes for the header

Understanding Type vs Direction

  • direction: Controls the layout direction (horizontal or vertical)
  • type: Controls the panel styling and sizing behavior
    • basic: Simple two-panel layout with gray styling
    • vertical: Two-panel layout with red/yellow styling and 40/60 split
    • nested: Complex nested layout with multiple panels
    • dynamic: Fully customizable panels with controls and callbacks

Components

Resizable

The main resizable container component.

ResizablePanelGroup

Container for resizable panels with direction control.

ResizablePanel

Individual resizable panel component.

ResizableHandle

Handle for resizing panels.

Examples

Basic Resizable Layout

import { Resizable } from '@dashflowx/core'


export default function BasicResizableLayout() {
  return (
    <Resizable 
      type="basic" 
      direction="horizontal" 
      className="max-w-md rounded-lg border"
      panelCount={2}
    />
  )
}

Preview:

Panel One
Panel One
Panel Two
Panel One

Multiple Panels Layout

import { Resizable } from '@dashflowx/core'


export default function MultiplePanelsLayout() {
  return (
    <Resizable 
      type="basic" 
      direction="horizontal" 
      className="max-w-lg rounded-lg border"
      panelCount={3}
    />
  )
}

Preview:

Panel One
Panel One
Panel Two
Panel One

Vertical Resizable Layout

import { Resizable } from '@dashflowx/core'


export default function VerticalResizableLayout() {
  return (
    <Resizable 
      type="vertical" 
      direction="vertical" 
      className="max-w-md rounded-lg border"
      panelCount={2}
    />
  )
}

Preview:

Left Panel
Panel One
Right Panel
Panel One

Horizontal Layout with Vertical Type

import { Resizable } from '@dashflowx/core'


export default function HorizontalVerticalTypeLayout() {
  return (
    <Resizable 
      type="vertical" 
      direction="horizontal" 
      className="max-w-md rounded-lg border"
      panelCount={2}
    />
  )
}

Preview:

Left Panel
Panel One
Right Panel
Panel One

Nested Resizable Layout

import { Resizable } from '@dashflowx/core'


export default function NestedResizableLayout() {
  return (
    <Resizable 
      type="nested" 
      direction="horizontal" 
      className="max-w-md rounded-lg border"
      panelCount={2}
    />
  )
}

Preview:

Main Panel

Code Editor

Write your code here

Nested Container
Sub Panel A

Preview

See your changes

Sub Panel B
Panel One

Dynamic Resizable Layout

import { Resizable } from '@dashflowx/core'


export default function DynamicResizableLayout() {
  return (
    <Resizable
      type="dynamic"
      direction="horizontal"
      height="600px"
      className="max-w-full rounded-lg border"
      panelCount={2}
    />
  )
}

Preview:

Panel One
Panel One
Panel Two
Panel One

Four Panel Layout

import { Resizable } from '@dashflowx/core'


export default function FourPanelLayout() {
  return (
    <Resizable
      type="basic"
      direction="horizontal"
      className="max-w-2xl rounded-lg border"
      panelCount={4}
    />
  )
}

Preview:

Panel One
Panel One
Panel Two
Panel One

Vertical Multi-Panel Layout

import { Resizable } from '@dashflowx/core'


export default function VerticalMultiPanelLayout() {
  return (
    <Resizable
      type="basic"
      direction="vertical"
      className="max-w-md rounded-lg border"
      height="600px"
      panelCount={3}
    />
  )
}

Preview:

Panel One
Panel One
Panel Two
Panel One

Custom Styled Resizable

import { Resizable } from '@dashflowx/core'


export default function CustomStyledResizable() {
  return (
    <Resizable
      type="basic"
      direction="horizontal"
      className="border border-blue-500 rounded-lg p-4"
      panelCount={2}
    />
  )
}

Preview:

Panel One
Panel One
Panel Two
Panel One

Large Resizable Layout

import { Resizable } from '@dashflowx/core'


export default function LargeResizableLayout() {
  return (
    <Resizable
      type="basic"
      direction="horizontal"
      className="scale-150"
      panelCount={2}
    />
  )
}

Preview:

Panel One
Panel One
Panel Two
Panel One

Resizable with Header

import { Resizable } from '@/components/resizable'


export default function ResizableWithHeader() {
  return (
    <Resizable 
      direction="horizontal" 
      className="max-w-md rounded-lg border"
      height="400px"
      panelCount={2}
      showHeader={true}
      headerTitle="My Resizable Layout"
      headerClassName="bg-blue-500 text-white p-2 rounded-t-lg"
    />
  )
}

Preview:

My Resizable Layout
Panel One
Panel One
Panel Two
Panel One

Custom Styled Header

import { Resizable } from '@/components/resizable'


export default function CustomStyledHeader() {
  return (
    <Resizable 
      direction="horizontal" 
      className="max-w-lg rounded-lg border"
      height="400px"
      panelCount={3}
      showHeader={true}
      headerTitle="Dashboard Layout"
      headerClassName="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-3 rounded-t-lg font-semibold"
    />
  )
}

Preview:

Dashboard Layout
Panel One
Panel One
Panel Two
Panel One

Common Use Cases

Code Editor Layout

import { Resizable } from '@dashflowx/core'


export default function CodeEditorLayout() {
  return (
    <Resizable
      type="dynamic"
      direction="horizontal"
      height="600px"
      className="max-w-full rounded-lg border"
      panelCount={2}
    />
  )
}

Dashboard Layout

import { Resizable } from '@dashflowx/core'


export default function DashboardLayout() {
  return (
    <Resizable
      type="nested"
      direction="horizontal"
      height="500px"
      className="max-w-full rounded-lg border"
      panelCount={2}
    />
  )
}

File Explorer Layout

import { Resizable } from '@dashflowx/core'


export default function FileExplorerLayout() {
  return (
    <Resizable
      type="vertical"
      direction="vertical"
      height="600px"
      className="max-w-md rounded-lg border"
      panelCount={2}
    />
  )
}

Chat Interface Layout

import { Resizable } from '@dashflowx/core'


export default function ChatInterfaceLayout() {
  return (
    <Resizable
      type="basic"
      direction="horizontal"
      height="500px"
      className="max-w-lg rounded-lg border"
      panelCount={3}
    />
  )
}

Best Practices

Clear Panel Content

Provide clear content for each panel.

// ✅ Good - Clear content
<Resizable 
  type="basic" 
  direction="horizontal" 
  panelCount={2}
  className="max-w-md rounded-lg border"
/>


// ❌ Avoid - Empty panels
<Resizable type="basic" direction="horizontal" panelCount={0} />

Consistent Styling

Maintain consistent styling across panels.

// ✅ Good - Consistent styling
<Resizable 
  type="basic" 
  direction="horizontal" 
  className="standard-resizable-style"
  panelCount={2}
/>


// ❌ Avoid - Inconsistent styling
<Resizable 
  type="basic" 
  direction="horizontal" 
  className="random-styles"
  panelCount={2}
/>

Appropriate Panel Sizes

Set appropriate default panel sizes.

// ✅ Good - Appropriate sizes
<Resizable 
  type="basic" 
  direction="horizontal" 
  panelCount={2}
  className="max-w-md rounded-lg border"
/>


// ❌ Avoid - Extreme sizes
<Resizable 
  type="basic" 
  direction="horizontal" 
  panelCount={10}
  className="max-w-xs rounded-lg border"
/>

Responsive Design

Make resizable layout responsive for different screen sizes.

// ✅ Good - Responsive
<Resizable 
  type="basic" 
  direction="horizontal" 
  className="flex flex-wrap justify-center"
  panelCount={2}
/>


// ❌ Avoid - Fixed width
<Resizable 
  type="basic" 
  direction="horizontal" 
  className="w-96"
  panelCount={2}
/>

Accessible Handles

Ensure resize handles are accessible to all users.

// ✅ Good - Accessible handles
<Resizable 
  type="basic" 
  direction="horizontal" 
  panelCount={2}
  className="max-w-md rounded-lg border"
/>


// ❌ Avoid - Hidden handles
<Resizable 
  type="basic" 
  direction="horizontal" 
  panelCount={2}
  className="opacity-0"
/>

Customization

Custom Styling

You can customize the resizable layout appearance using CSS classes:

import { Resizable } from '@dashflowx/core'


export default function CustomStyledResizable() {
  return (
    <Resizable
      type="basic"
      direction="horizontal"
      className="border-2 border-blue-500 rounded-xl shadow-lg bg-gradient-to-r from-blue-50 to-purple-50"
      panelCount={2}
    />
  )
}

Different Panel Counts

Experiment with different numbers of panels:

// Two panels
<Resizable type="basic" direction="horizontal" panelCount={2} />


// Three panels
<Resizable type="basic" direction="horizontal" panelCount={3} />


// Four panels
<Resizable type="basic" direction="horizontal" panelCount={4} />


// Five panels
<Resizable type="basic" direction="horizontal" panelCount={5} />

Different Types

Use different layout types for various use cases:

// Basic layout
<Resizable type="basic" direction="horizontal" panelCount={2} />


// Vertical layout
<Resizable type="vertical" direction="vertical" panelCount={2} />


// Nested layout
<Resizable type="nested" direction="horizontal" panelCount={2} />


// Dynamic layout
<Resizable type="dynamic" direction="horizontal" panelCount={2} />

Different Directions

Control the layout direction:

// Horizontal layout
<Resizable type="basic" direction="horizontal" panelCount={2} />


// Vertical layout
<Resizable type="basic" direction="vertical" panelCount={2} />

Size Variations

Use different sizes for different emphasis levels:

// Small resizable
<Resizable className="text-sm" />


// Standard resizable
<Resizable className="text-base" />


// Large resizable
<Resizable className="text-lg" />

Advanced Usage

Dynamic Panel Content

Load panel content dynamically:

const [panelContent, setPanelContent] = useState([]);


useEffect(() => {
  // Load panel content from API
  loadPanelContent().then(setPanelContent);
}, []);

Conditional Panels

Show/hide panels based on conditions:

const getPanels = (userRole) => {
  const basePanels = [
    { id: 'main', content: 'Main Content' }
  ];
  
  if (userRole === 'admin') {
    basePanels.push({ id: 'admin', content: 'Admin Panel' });
  }
  
  return basePanels;
};

Panel State Management

Handle panel state:

const [panelSizes, setPanelSizes] = useState({});


const handleResize = (panelId, size) => {
  setPanelSizes(prev => ({
    ...prev,
    [panelId]: size
  }));
};
  • Grid: For grid layouts
  • Flex: For flex layouts
  • Panel: For panel containers
  • Handle: For resize handles
  • Layout: For layout containers

API Reference

For the complete API reference and advanced usage patterns, see the Resizable API documentation.

Edit this page on GitHub
previousGrid