QUI VSCode0.7.0

Overlay Panel

import {OverlayPanel} from "@qui/react-vscode"

Examples

Simple

Dark Modern
import {ReactNode} from "react"


import {Button, OverlayPanel} from "@qui/react-vscode"


export default function Showcase(): ReactNode {
  return (
    <OverlayPanel anchor={<Button>Default</Button>}>
      <div className="flex place-items-center p-2">Panel content</div>
    </OverlayPanel>
  )
}

API

OverlayPanelProps

Name & DescriptionOption(s)Default
anchor
*
The interactive element that will be used to compute the position of the floating panel. If supplied as an element, event handlers will be applied for triggering the open/close state of the menu on interaction. Can also be supplied as a function that returns an element, or a reference to a ReactElement.
| Element
| ((
    props: Props,
  ) => Element)
| RefObject<
    HTMLElement | object
  >
children
*
React children prop. The content of the panel.
| ReactNode
| ((props: {
    open: boolean
    setOpen: (
      open: boolean,
      ...events: any[]
    ) => void
  }) => ReactNode)
animationDuration
The CSS transition-duration of the enter and exit animations. Supply as a number to configure both transitions at once, or supply an object to configure the enter and exit transitions independently. Supply as 0 to disable animations (default).
| number
| {
    enter: number
    exit: number
  }
0
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'div'
autoUpdate
Ensure that the component remains anchored to its reference element following screen resizes or position changes.
boolean
defaultOpen
The default value when uncontrolled.
boolean
disableInitialFocus
If true, the overlay panel will not steal focus when it opens.
boolean
flip
Whether to flip the component's placement to keep it in view.
boolean
true
keepMounted
If true, content of the overlay panel is always mounted, even when the panel is not visible.
boolean
false
offset
The distance between the component and its anchor element.
| number
| {
    alignmentAxis?: number
    crossAxis?: number
    mainAxis?: number
  }
0
open
The controlled state for the component's visibility.
boolean
openOnFocus
If true, the component will show when the anchor element is focused. This property is ignored if open is supplied.
boolean
false
openOnHover
If true, the component will show when the anchor element is hovered. This property is ignored if open is supplied.
boolean
false
placement
Describes the placement of the component before FloatingUI has applied all the modifiers that may have flipped or altered the component. The final placement may differ from this input property.
| 'top-start'
| 'top'
| 'top-end'
| 'bottom-start'
| 'bottom'
| 'bottom-end'
| 'left-start'
| 'left'
| 'left-end'
| 'right-start'
| 'right'
| 'right-end'
'top'
position
CSS position attribute of the component. Can be "absolute" or "fixed".
| 'absolute'
| 'fixed'
'absolute'
restoreFocus
If true, focus will be restored to the component's anchor element on close.
boolean
!hover
zIndex
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
| string
| number
1000
Type
| Element
| ((
    props: Props,
  ) => Element)
| RefObject<
    HTMLElement | object
  >
Description
The interactive element that will be used to compute the position of the floating panel. If supplied as an element, event handlers will be applied for triggering the open/close state of the menu on interaction. Can also be supplied as a function that returns an element, or a reference to a ReactElement.
Type
| ReactNode
| ((props: {
    open: boolean
    setOpen: (
      open: boolean,
      ...events: any[]
    ) => void
  }) => ReactNode)
Description
React children prop. The content of the panel.
Type
| number
| {
    enter: number
    exit: number
  }
Default
0
Description
The CSS transition-duration of the enter and exit animations. Supply as a number to configure both transitions at once, or supply an object to configure the enter and exit transitions independently. Supply as 0 to disable animations (default).
Type
| ElementType
| ComponentType
Default
'div'
Description
The component used for the root node. It can be a React component or element.
Type
boolean
Description
Ensure that the component remains anchored to its reference element following screen resizes or position changes.
Type
boolean
Description
The default value when uncontrolled.
Type
boolean
Description
If true, the overlay panel will not steal focus when it opens.
Type
boolean
Default
true
Description
Whether to flip the component's placement to keep it in view.
Type
boolean
Default
false
Description
If true, content of the overlay panel is always mounted, even when the panel is not visible.
Type
| number
| {
    alignmentAxis?: number
    crossAxis?: number
    mainAxis?: number
  }
Default
0
Description
The distance between the component and its anchor element.
Type
boolean
Description
The controlled state for the component's visibility.
Type
boolean
Default
false
Description
If true, the component will show when the anchor element is focused. This property is ignored if open is supplied.
Type
boolean
Default
false
Description
If true, the component will show when the anchor element is hovered. This property is ignored if open is supplied.
Type
| 'top-start'
| 'top'
| 'top-end'
| 'bottom-start'
| 'bottom'
| 'bottom-end'
| 'left-start'
| 'left'
| 'left-end'
| 'right-start'
| 'right'
| 'right-end'
Default
'top'
Description
Describes the placement of the component before FloatingUI has applied all the modifiers that may have flipped or altered the component. The final placement may differ from this input property.
Type
| 'absolute'
| 'fixed'
Default
'absolute'
Description
CSS position attribute of the component. Can be "absolute" or "fixed".
Type
boolean
Default
!hover
Description
If true, focus will be restored to the component's anchor element on close.
Type
| string
| number
Default
1000
Description
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
Previous
Menu
Next
Progress
Examples
Simple
API
OverlayPanelProps
Copyright © 2025 QUALCOMM incorporated. All rights reserved.