FloatingPanel

Pass a trigger, title, and body. The panel can be dragged, resized, minimized, maximized, and restored.

import { Button, FloatingPanel, Text } from '@manti-ui/react';

export default function FloatingPanelBasic() {
  return (
    <FloatingPanel trigger={<Button>Open panel</Button>} title="Layers">
      <Text emphasis="muted">
        Drag me by the header, or resize from any edge.
      </Text>
    </FloatingPanel>
  );
}

API

Prop	Type	Default	Description
`trigger`	`ReactElement`	—	Element that opens the panel. Cloned with the machine trigger props.
`title`	`ReactNode`	—	Panel title shown in the header.
`children`	`ReactNode`	—	Panel body.
`draggable`	`boolean`	`true`	Allow dragging by the header.
`resizable`	`boolean`	`true`	Allow edge/corner resizing.
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	—	Called whenever the open state changes.

Styling

Anatomy

Part	Selector	Description
`positioner`	`[data-scope="floating-panel"][data-part="positioner"]`	Positions the floating panel.
`content`	`[data-scope="floating-panel"][data-part="content"]`	The translucent panel surface.
`header`	`[data-scope="floating-panel"][data-part="header"]`	The title bar, also the drag handle.
`drag-trigger`	`[data-scope="floating-panel"][data-part="drag-trigger"]`	The draggable region of the header.
`title`	`[data-scope="floating-panel"][data-part="title"]`	The panel title text.
`control`	`[data-scope="floating-panel"][data-part="control"]`	Wraps the stage and close buttons.
`stage-trigger`	`[data-scope="floating-panel"][data-part="stage-trigger"]`	Minimize, maximize, or restore the panel.
`close-trigger`	`[data-scope="floating-panel"][data-part="close-trigger"]`	Closes the panel.
`body`	`[data-scope="floating-panel"][data-part="body"]`	The scrollable panel content.
`resize-trigger`	`[data-scope="floating-panel"][data-part="resize-trigger"]`	An edge or corner resize handle.

Tokens

Token	Controls
`--manti-floating-panel-min-width`	min width
`--manti-floating-panel-min-height`	min height

Last updated 13 September 2026