Skip to content
QuickGUI

Overlays & Dialogs

Use a QuickGUI overlay for app-styled content, or a system dialog for file picking and alerts.

#Popover

<Popover.Root open={open()} onOpenChange={setOpen}>
  <Popover.Trigger><Text>Account</Text></Popover.Trigger>
  <Popover.Portal>
    <Popover.Positioner side="bottom" sideOffset={8}>
      <Popover.Popup style={{ width: 240, padding: 16 }}>
        <Popover.Title><Text>Account</Text></Popover.Title>
        <Popover.Close><Text>Done</Text></Popover.Close>
      </Popover.Popup>
    </Popover.Positioner>
  </Popover.Portal>
</Popover.Root>

The side is a preference; placement flips if it would overflow.

#Dialog

<Dialog.Root open={open()} onOpenChange={setOpen}>
  <Dialog.Trigger><Text>Edit profile</Text></Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Viewport>
      <Dialog.Popup>
        <Dialog.Title><Text>Edit profile</Text></Dialog.Title>
        <Dialog.Description><Text>Changes are saved immediately.</Text></Dialog.Description>
        <Dialog.Close><Text>Done</Text></Dialog.Close>
      </Dialog.Popup>
    </Dialog.Viewport>
  </Dialog.Portal>
</Dialog.Root>

AlertDialog is for confirmations.

#System popover

SystemPopover opens a native child window, which can extend past the owner window’s edge. Give the content a width and height.

#Native dialogs

import { Dialog } from "@quickgui/native";

const choice = await Dialog.showAlertDialog({
  message: "Save changes?",
  buttons: [{ label: "Save" }, { label: "Cancel", role: "cancel" }],
});
const result = await Dialog.showOpenDialog({ properties: ["openFile", "multiSelections"] });