Resizable sidebar for shadcn/ui

Drag. Click. Resize. Still shadcn/ui Sidebar.

A drop-in enhancement that keeps the original Sidebar API, composition, and customization model.

Steal the code
↔ Drag rail👈 Click rail← Auto collapse⌘B toggle↻ Persists on reload⚡ Smooth drag
Drag

Drag to resize

Save on release. Refresh to see the sidebar keep the same width.

Click

Click to collapse

The same rail toggles compact mode. The keyboard shortcut still works.

Drop-in

Keep shadcn/ui

Use the normal Sidebar composition, then add resize where products need it.

Philosophy

Native Sidebar first.

The project keeps shadcn/ui's component model and adds the missing product layer: resize state, cookies, pointer capture, and a stable mobile Sheet.

Advantage

Persistence, SSR restore, mobile accessibility, and Tailwind v4 tokens are already handled.

Customization

Menus, variants, slots, and styling remain shadcn/ui. Resize is only the added layer.

SSR width restorePointer Events dragMobile Sheet a11yTailwind v4 tokensRadix primitivesCookie persistence

Specs

Modern stack.

Next.js16.2.9
React19.2.7
Tailwind CSS4.3.1
Radix UI1.6.0
shadcn/uinew-york v4
PackageBun

Built for semantic tokens, accessible dialogs, keyboard control, and low-noise React updates during drag.