xAIcreator | AI content marketing agent for X

ResizableSidebar

A draggable sidebar component with width persistence and smooth transitions

Basic Usage

Default Sidebar

Drag the right edge to resize

Props:

{ defaultWidth: 352, minWidth: 240, maxWidth: 480 }

Sidebar Content

Drag the right edge to resize this sidebar. The width will be saved to localStorage.

Current Width:

352px

Min width: 240px
Max width: 480px
Persistent storage

Main Content Area

This area automatically adjusts as you resize the sidebar.

Custom Width Range

Narrow Sidebar

Custom min/max width constraints

Props:

{ defaultWidth: 280, minWidth: 200, maxWidth: 320 }

Narrow Sidebar

Constrained between 200-320px

Width:

280px

Main content with a narrower sidebar

Collapsible Sidebar

With Collapse State

Combine with collapse functionality

Props:

{ collapsed: "boolean", defaultWidth: 352 }

Collapsible Content

When collapsed, the resize handle disappears and the sidebar can show minimal content.

Click the button above to toggle the sidebar

Right Side Sidebar

Right-aligned Sidebar

Drag the left edge to resize

Props:

{ side: "right", defaultWidth: 352, minWidth: 240, maxWidth: 480 }

Main Content Area

This area automatically adjusts as you resize the right sidebar.

Right Sidebar Content

Drag the left edge to resize this sidebar. The resize handle appears on the left side.

Current Width:

352px

Right-aligned layout
Drag handle on left edge
Same features as left sidebar

Usage Guidelines

•Set appropriate minWidth and maxWidth based on your content needs
•Use unique storageKey for each instance to save widths separately
•The resize handle appears on hover and shows a visual indicator when dragging
•Width is automatically persisted to localStorage and restored on mount
•Use onWidthChange callback to react to width changes
•Set collapsed={true} to hide resize handle and allow custom collapsed width
•Use side="right" for right-aligned sidebars (resize handle on left edge)

Import and Usage:

import { ResizableSidebar } from "@/components/ui/resizable-sidebar"

// Left sidebar (default)
<ResizableSidebar
  defaultWidth={352}
  minWidth={240}
  maxWidth={480}
  storageKey="my-sidebar"
  onWidthChange={(width) => console.log(width)}
>
  {/* Sidebar content */}
</ResizableSidebar>

// Right sidebar
<ResizableSidebar
  side="right"
  defaultWidth={352}
  minWidth={240}
  maxWidth={480}
  storageKey="my-right-sidebar"
>
  {/* Right sidebar content */}
</ResizableSidebar>

Props

Prop	Type	Default	Description
`defaultWidth`	number	352	Initial width of the sidebar
`minWidth`	number	240	Minimum allowed width
`maxWidth`	number	480	Maximum allowed width
`storageKey`	string	"resizable-sidebar-width"	localStorage key for persisting width
`collapsed`	boolean	false	Whether sidebar is collapsed
`onWidthChange`	function	-	Callback when width changes
`side`	"left" \| "right"	"left"	Position of the sidebar (left or right)
`className`	string	-	Additional CSS classes