Product block

Resizable Sidebar With Splitter

A drag handle that is also a keyboard-operable separator, with arrow keys that swap in RTL, pointer capture for touch and pen, and double-click to reset.

179 lineslucide-react

sidebar
resizable
splitter
drag
separator

What's included

components/sidebar-resizable.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add sidebar-resizable

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Drag the edge, or focus it and use the arrow keysSidebar width 264px

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/sidebar-resizable.tsx

'use client'

/**
 * <SidebarResizable> — a sidebar with a drag handle that a keyboard can also
 * move.
 *
 * Most resizable sidebars are pointer-only, which makes the width a thing a
 * keyboard user is stuck with. This one implements the window-splitter
 * pattern:
 *
 *  - The handle is `role="separator"` with `aria-orientation="vertical"`, a
 *    name, `aria-valuenow/min/max`, and `tabIndex={0}`. Left/Right move it 16px
 *    (48px with Shift), Home and End jump to the limits, and double-click
 *    resets — the same gestures a desktop split view offers.
 *  - The arrow keys mean "move the edge that way", not "grow", so in an RTL
 *    document, where the sidebar is on the right, they are swapped. Direction
 *    is read from the computed style, so it also follows a `dir` set on an
 *    ancestor.
 *  - Pointer drag uses pointer capture, so a fast flick that leaves the handle
 *    keeps tracking, and it works for touch and pen as well as mouse. The
 *    width is measured from the container edge rather than accumulated from
 *    deltas, so it cannot drift.
 *  - The handle's hit area is wider than the line you see. A 1px target is a
 *    pixel-hunting exercise.
 */

import * as React from 'react'
import { Inbox, Star, Send, FileText, Archive, Trash2 } from 'lucide-react'

export interface ResizableItem {
  id: string
  label: string
  icon: React.ReactNode
  count?: number
}

export interface SidebarResizableProps {
  items?: ResizableItem[]
  min?: number
  max?: number
  defaultWidth?: number
  children?: React.ReactNode
  className?: string
}

const icon = 'h-4 w-4 shrink-0'

const DEFAULT_ITEMS: ResizableItem[] = [
  { id: 'inbox', label: 'Inbox and everything that still needs a reply', icon: <Inbox aria-hidden className={icon} />, count: 14 },
  { id: 'starred', label: 'Starred conversations', icon: <Star aria-hidden className={icon} /> },
  { id: 'sent', label: 'Sent', icon: <Send aria-hidden className={`${icon} rtl:-scale-x-100`} /> },
  { id: 'drafts', label: 'Drafts', icon: <FileText aria-hidden className={icon} />, count: 3 },
  { id: 'archive', label: 'Archive', icon: <Archive aria-hidden className={icon} /> },
  { id: 'trash', label: 'Trash', icon: <Trash2 aria-hidden className={icon} /> },
]

const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n))

export function SidebarResizable({
  items = DEFAULT_ITEMS,
  min = 200,
  max = 360,
  defaultWidth = 264,
  children,
  className = '',
}: SidebarResizableProps) {
  const [width, setWidth] = React.useState(() => clamp(defaultWidth, min, max))
  const [dragging, setDragging] = React.useState(false)
  const [activeId, setActiveId] = React.useState(items[0]?.id)
  const frameRef = React.useRef<HTMLDivElement>(null)

  const isRtl = () =>
    frameRef.current ? getComputedStyle(frameRef.current).direction === 'rtl' : false

  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
    e.currentTarget.setPointerCapture(e.pointerId)
    setDragging(true)
  }

  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
    if (!dragging || !frameRef.current) return
    const rect = frameRef.current.getBoundingClientRect()
    const from = isRtl() ? rect.right - e.clientX : e.clientX - rect.left
    setWidth(clamp(Math.round(from), min, max))
  }

  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    const step = e.shiftKey ? 48 : 16
    // ArrowRight moves the edge to the right, which grows an LTR sidebar and
    // shrinks an RTL one.
    const dir = isRtl() ? -1 : 1
    if (e.key === 'ArrowRight') setWidth((w) => clamp(w + step * dir, min, max))
    else if (e.key === 'ArrowLeft') setWidth((w) => clamp(w - step * dir, min, max))
    else if (e.key === 'Home') setWidth(min)
    else if (e.key === 'End') setWidth(max)
    else return
    e.preventDefault()
  }

  return (
    <div
      ref={frameRef}
      className={`flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ${
        dragging ? 'select-none' : ''
      } ${className}`}
    >
      <aside
        aria-label="Mailboxes"
        style={{ width }}
        className="relative flex shrink-0 flex-col bg-card/40"
      >
        <div className="flex h-14 items-center px-4 text-sm font-semibold tracking-tight">Mail</div>
        <nav aria-label="Main" className="flex-1 space-y-0.5 overflow-y-auto px-2 pb-3">
          {items.map((item) => {
            const active = item.id === activeId
            return (
              <a
                key={item.id}
                href="#"
                aria-current={active ? 'page' : undefined}
                onClick={(e) => {
                  e.preventDefault()
                  setActiveId(item.id)
                }}
                className={`flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
                  active
                    ? 'bg-primary/10 text-primary'
                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                }`}
              >
                {item.icon}
                <span className="min-w-0 flex-1 truncate">{item.label}</span>
                {item.count ? (
                  <span className="rounded-full bg-muted px-1.5 py-0.5 text-xs tabular-nums text-muted-foreground">
                    {item.count}
                  </span>
                ) : null}
              </a>
            )
          })}
        </nav>

        <div
          role="separator"
          aria-orientation="vertical"
          aria-label="Resize sidebar"
          aria-valuenow={width}
          aria-valuemin={min}
          aria-valuemax={max}
          tabIndex={0}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          onPointerUp={() => setDragging(false)}
          onPointerCancel={() => setDragging(false)}
          onKeyDown={onKeyDown}
          onDoubleClick={() => setWidth(clamp(defaultWidth, min, max))}
          className="group absolute inset-y-0 -end-1.5 z-10 flex w-3 cursor-col-resize touch-none justify-center focus-visible:outline-none"
        >
          <span
            aria-hidden
            className={`h-full w-px transition-colors group-hover:w-0.5 group-hover:bg-primary group-focus-visible:w-0.5 group-focus-visible:bg-primary ${
              dragging ? 'w-0.5 bg-primary' : 'bg-border/60'
            }`}
          />
        </div>
      </aside>

      <main className="hidden min-w-0 flex-1 border-s border-transparent p-6 sm:block">
        {children ?? (
          <div className="flex h-full flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
            <span>Drag the edge, or focus it and use the arrow keys</span>
            <span className="tabular-nums">Sidebar width {width}px</span>
          </div>
        )}
      </main>
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/sidebar-resizable.tsx and import it where you need the section:

import { SidebarResizable } from '@/components/sidebar-resizable'

Customize

3 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`items`	`ResizableItem[]`	`DEFAULT_ITEMS`
`min`	`number`	`200`
`max`	`number`	`360`
`defaultWidth`	`number`	`264`
`children`	`React.ReactNode`	—
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

sidebar-resizable.html

<!--
  Resizable Sidebar With Splitter — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<div class="flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background  ">
  <aside aria-label="Mailboxes" style="width:264px" class="relative flex shrink-0 flex-col bg-card/40">
    <div class="flex h-14 items-center px-4 text-sm font-semibold tracking-tight">Mail</div>
    <nav aria-label="Main" class="flex-1 space-y-0.5 overflow-y-auto px-2 pb-3">
      <a href="#" aria-current="page" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary bg-primary/10 text-primary">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-inbox h-4 w-4 shrink-0" aria-hidden="true">
          <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
          <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
        </svg>
        <span class="min-w-0 flex-1 truncate">Inbox and everything that still needs a reply</span>
        <span class="rounded-full bg-muted px-1.5 py-0.5 text-xs tabular-nums text-muted-foreground">14</span>
      </a>
      <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <span class="min-w-0 flex-1 truncate">Starred conversations</span>
      </a>
      <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send h-4 w-4 shrink-0 rtl:-scale-x-100" aria-hidden="true">
          <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path>
          <path d="m21.854 2.147-10.94 10.939"></path>
        </svg>
        <span class="min-w-0 flex-1 truncate">Sent</span>
      </a>
      <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
          <path d="M10 9H8"></path>
          <path d="M16 13H8"></path>
          <path d="M16 17H8"></path>
        </svg>
        <span class="min-w-0 flex-1 truncate">Drafts</span>
        <span class="rounded-full bg-muted px-1.5 py-0.5 text-xs tabular-nums text-muted-foreground">3</span>
      </a>
      <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-archive h-4 w-4 shrink-0" aria-hidden="true">
          <rect width="20" height="5" x="2" y="3" rx="1"></rect>
          <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"></path>
          <path d="M10 12h4"></path>
        </svg>
        <span class="min-w-0 flex-1 truncate">Archive</span>
      </a>
      <a href="#" class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2 lucide-trash-2 h-4 w-4 shrink-0" aria-hidden="true">
          <path d="M3 6h18"></path>
          <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
          <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
          <line x1="10" x2="10" y1="11" y2="17"></line>
          <line x1="14" x2="14" y1="11" y2="17"></line>
        </svg>
        <span class="min-w-0 flex-1 truncate">Trash</span>
      </a>
    </nav>
    <div role="separator" aria-orientation="vertical" aria-label="Resize sidebar" aria-valuenow="264" aria-valuemin="200" aria-valuemax="360" tabindex="0" class="group absolute inset-y-0 -end-1.5 z-10 flex w-3 cursor-col-resize touch-none justify-center focus-visible:outline-none">
      <span aria-hidden="true" class="h-full w-px transition-colors group-hover:w-0.5 group-hover:bg-primary group-focus-visible:w-0.5 group-focus-visible:bg-primary bg-border/60"></span>
    </div>
  </aside>
  <main class="hidden min-w-0 flex-1 border-s border-transparent p-6 sm:block">
    <div class="flex h-full flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
      <span>Drag the edge, or focus it and use the arrow keys</span>
      <span class="tabular-nums">Sidebar width 264px</span>
    </div>
  </main>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

10 more blocks in Sidebars

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Sidebars

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Sidebars blocks

View category

Resizable Sidebar With Splitter

What's included

Works with

License

Preview

Source

Before you paste

Where it goes

Customize

Props

Not using React?

For AI

10 more blocks in Sidebars

Shipping one commercially

More Sidebars blocks

Grouped App Sidebar

Collapsible Icon-Rail Sidebar

Rail Plus Secondary Panel

Nested Accordion Sidebar

Sidebar With Workspace Switcher

Floating Inset Sidebar

Docs Sidebar With Filter

Chat History Sidebar

Mail Folders Sidebar

File Explorer Tree Sidebar