Floating Panel

Used to display content in a non-modal floating window

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/floating-panel.json

Usage


import { 
  FloatingPanel,
  FloatingPanelTrigger,
  FloatingPanelContent,
  FloatingPanelHeader,
  FloatingPanelTitle,
  FloatingPanelBody,
} from "@/components/ui/floating-panel";


<FloatingPanel>
  <FloatingPanelTrigger />
  <FloatingPanelContent>
    <FloatingPanelHeader>
      <FloatingPanelTitle />
    </FloatingPanelHeader>
    <FloatingPanelBody />
  </FloatingPanelContent>
</FloatingPanel>

Examples

Controlled Size

Control the panel size programmatically using the size and onSizeChange props.

Controlled Position

Control the panel position programmatically using the position and onPositionChange props.

Custom spacing

Use [--space:--spacing("value")] on <FloatingPanelContent /> to adjust internal padding (default --spacing(4)).

API Reference

FloatingPanel

Root component. Manages panel position and drag state.

Prop	Type	Default
`open`	`boolean`	`-`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(details: OpenChangeDetails) => void`	`-`
`position`	`Point`	`-`
`defaultPosition`	`Point`	`-`
`onPositionChange`	`(details: PositionChangeDetails) => void`	`-`
`size`	`Size`	`-`
`defaultSize`	`Size`	`-`
`onSizeChange`	`(details: SizeChangeDetails) => void`	`-`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`closeOnEscape`	`boolean`	`true`
`draggable`	`boolean`	`true`
`resizable`	`boolean`	`true`
`className`	`string`	`-`

FloatingPanelTrigger

Opens the floating panel on click.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

FloatingPanelContent

Holds the panel content.

Prop	Type	Default
`resizable`	`boolean`	`true`
`className`	`string`	`-`

Attribute	Default
`--space`	`--spacing(4)`

FloatingPanelHeader

Header area. Acts as drag handle for repositioning.

Prop	Type	Default
`className`	`string`	`-`

FloatingPanelTitle

Title for the panel.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

FloatingPanelBody

Scrollable body. Uses ScrollArea for overflow.

Prop	Type	Default
`scrollFade`	`boolean`	`false`
`className`	`string`	`-`

FloatingPanelCloseTrigger

Closes the panel on click.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Examples Controlled Size Controlled Position Custom spacing API Reference FloatingPanel FloatingPanelTrigger FloatingPanelContent FloatingPanelHeader FloatingPanelTitle FloatingPanelBody FloatingPanelCloseTrigger