Resizable

import { createSignal } from 'solid-js';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@tile-ui/solid';

export default function ResizableDemo() {
	const [lastInput, setLastInput] = createSignal('Drag a separator or focus it and use arrows.');
	let horizontalHandle: HTMLDivElement | undefined;

Use ResizablePanelGroup for pointer and keyboard split layouts; add an id only when the hydrated client should persist panel sizes.

Registry install

pnpm dlx shadcn@latest add @tile-ui/resizable

Package usage

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@tile-ui/solid';

<ResizablePanelGroup id="workspace-layout" panelIds={["navigation", "canvas"]}><ResizablePanel id="navigation">Navigation</ResizablePanel><ResizableHandle withHandle /><ResizablePanel id="canvas">Canvas</ResizablePanel></ResizablePanelGroup>

Highlights

• Pointer and keyboard separators
• Equal deterministic server layout
• Optional localStorage persistence after hydration

Registry dependencies

Item	Purpose
resizable	Component source and module styles
core	Framework-agnostic logic helpers
styles	Shared SCSS tokens and globals

API reference

ResizablePanelGroup

Prop	Type	Default
direction	'horizontal' | 'vertical'	‘horizontal’
id	string	—
panelIds	readonly string[]	—

ResizablePanel

No custom props.

ResizableHandle

Prop	Type	Default
withHandle	boolean	—

Related docs

• Sidebar
• Sheet
• Table