Resizable

Accessible resizable panel groups and layouts with keyboard support.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/resizable

Lineage

Spoke

Anatomy

import {
	ResizablePanelGroup,
	ResizablePanel,
	ResizableHandle,
} from "@/components/ui/resizable"

export default () => (
	<ResizablePanelGroup>
		<ResizablePanel />
		<ResizableHandle />
		<ResizablePanel />
	</ResizablePanelGroup>
)

Spoke utility classes

Class	Fallback chain	Description
`--resizable-handle`	`var(--border)`	Colour for handle resizable variant
`--resizable-handle-ring`	`var(--ring)`	Colour for handle ring resizable variant
`--resizable-handle-border`	`var(--border)`	Border colour for handle resizable variant