Floating Panel

Installation$

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

Usage$

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

Drag either panel inside its container. The default surface is the glinr lift look with elevation 3, so it reads on any backdrop.

Examples$

Variants$

glinr is the default, plain is the flat shadcn look, solid is a neutral tonal face and glass is opt-in. Glass needs a backdrop, so the set below sits on a vivid one.

import { FloatingPanel } from "@glinui/ui"
// Omit variant to follow the ambient style (glinr by default).
export function FloatingPanelVariants() {

import { FloatingPanel } from "@glinui/ui"


// Omit variant to follow the ambient style (glinr by default).
export function FloatingPanelVariants() {
return (
  <>
    <FloatingPanel variant="glinr">
      ...
    </FloatingPanel>
    <FloatingPanel variant="plain">
      ...
    </FloatingPanel>
    <FloatingPanel variant="solid">
      ...
    </FloatingPanel>
    <FloatingPanel variant="glass">
      ...
    </FloatingPanel>
  </>
)
}

Colors$

Tones apply through the soft variant.

import { FloatingPanel } from "@glinui/ui"
export function FloatingPanelTones() {
return (

import { FloatingPanel } from "@glinui/ui"


export function FloatingPanelTones() {
return (
  <FloatingPanel variant="soft" tone="success">
    ...
  </FloatingPanel>
)
}

In a layout$

Panels rendered statically (className="static") inside a dashboard row.

// Panels rendered statically (className="static") inside a dashboard row.
import { FloatingPanel } from "@glinui/ui"
export function FloatingPanelLayout() {

// Panels rendered statically (className="static") inside a dashboard row.
import { FloatingPanel } from "@glinui/ui"


export function FloatingPanelLayout() {
return (
  <section className="grid gap-4 sm:grid-cols-3">
    ...
  </section>
)
}

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$

Source$

import { FloatingPanel } from "@glinui/ui"