Signature / Moleculestable

Floating Panel

Draggable glass panel with depth shadows and optional close button.

@glinui/uiComponent: floating-panel

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add floating-panel

Usage$

FloatingPanel is a "use client" component. Place it inside a relative container. Drag to reposition.

Basic$

Drag Me

This panel is draggable.

TSX

1"use client"
2import { FloatingPanel } from "@glinui/ui"
3
4export function FloatingPanelDemo() {
5return (
6  <div className="relative h-64 w-full overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
7    <FloatingPanel defaultX={40} defaultY={30}>
8      <h3 className="text-sm font-semibold text-white">Drag Me</h3>
9      <p className="mt-1 text-xs text-neutral-400">This panel is draggable.</p>
10    </FloatingPanel>
11  </div>
12)
13}

Examples$

With Close Button$

Closable

Click X to dismiss.

TSX

1"use client"
2import { FloatingPanel } from "@glinui/ui"
3import { useState } from "react"
4
5export function FloatingPanelCloseDemo() {
6const [open, setOpen] = useState(true)
7return (
8  <div className="relative h-64 w-full overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
9    {open && (
10      <FloatingPanel closable onClose={() => setOpen(false)} defaultX={60} defaultY={20}>
11        <h3 className="text-sm font-semibold text-white">Closable</h3>
12        <p className="mt-1 text-xs text-neutral-400">Click X to dismiss.</p>
13      </FloatingPanel>
14    )}
15  </div>
16)
17}

Accessibility$

Close button has aria-label="Close panel".
Drag interaction uses Pointer Events API for broad device support.
Interactive elements inside the panel (buttons, links) are not affected by drag.

Reduced Motion$

No animation is used — drag is position-based, not animated.

API Reference$

Prop	Type	Required	Default	Description
`closable`	`boolean`	No	`false`	Show close button
`defaultX`	`number`	No	`0`	Initial x position
`defaultY`	`number`	No	`0`	Initial y position
`draggable`	`boolean`	No	`true`	Enable dragging
`onClose`	`() => void`	No	`-`	Close callback
`width`	`number \| string`	No	`320`	Panel width

Source$

TSX

1import { FloatingPanel } from "@glinui/ui"

packages/ui/src/components/floating-panel.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/floating-panel.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

FloatingPanelProps

`FloatingPanelProps`

Prop	Type	Required	Default	Description
`closable`	`boolean`	No	`false`	Show close button
`defaultX`	`number`	No	`0`	Initial x position
`defaultY`	`number`	No	`0`	Initial y position
`draggable`	`boolean`	No	`true`	Enable dragging
`onClose`	`() => void`	No	`-`	Close callback
`width`	`number \| string`	No	`320`	Panel width