Floating Panel

ProNew

A draggable, resizable, non-modal panel that floats over the page, stays in the viewport, minimises and moves from the keyboard.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac/floating-panel

Prop	Type	Default	Description
`open / onOpenChange`	`boolean / (open) => void`	`-`	Controlled visibility.
`title`	`string`	`-`	Title and accessible name.
`defaultPosition`	`[number, number]`	`[80, 80]`	Start position in px.
`defaultSize / minSize`	`[number, number]`	`[360, 280] / [240, 140]`	Sizes in px.
`minimizable`	`boolean`	`true`	Show the minimise button.
`resizable`	`boolean`	`true`	Show the resize handle.

Role: dialog.

role=dialog with aria-modal=false: it never traps focus.
The title bar and resize handle are focusable with keyboard equivalents for dragging.
The panel is clamped to the viewport and comes to the front when used.

Guide and examples


pnpm dlx shadcn@latest add @tealmac/floating-panel

Prop	Type	Default	Description
`open / onOpenChange`	`boolean / (open) => void`	`-`	Controlled visibility.
`title`	`string`	`-`	Title and accessible name.
`defaultPosition`	`[number, number]`	`[80, 80]`	Start position in px.
`defaultSize / minSize`	`[number, number]`	`[360, 280] / [240, 140]`	Sizes in px.
`minimizable`	`boolean`	`true`	Show the minimise button.
`resizable`	`boolean`	`true`	Show the resize handle.

Role: dialog.

role=dialog with aria-modal=false: it never traps focus.
The title bar and resize handle are focusable with keyboard equivalents for dragging.
The panel is clamped to the viewport and comes to the front when used.