Fix pointer-events: none stuck on body after a Radix or shadcn Dialog closes

When a page stops taking clicks after a shadcn Dialog, Sheet or AlertDialog closes, Radix left pointer-events: none on the body. This page is the code side: a console check, the dedupe that fixes it at the source, a non-modal menu that never touches the body, a dev-only watcher, and Stack Cart Drawer for when the stuck overlay was a cart.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

The pattern that doesn't lock the page

components/row-actions.tsx

"use client";
import { useState } from "react";
import { Dialog, DropdownMenu } from "radix-ui";

// The dialog is a sibling of the menu, opened from state. The menu is
// non-modal, so it never saves or restores pointer-events on <body>.
export function RowActions({ onDelete }: { onDelete: () => void }) {
  const [confirmOpen, setConfirmOpen] = useState(false);

  return (
    <>
      <DropdownMenu.Root modal={false}>
        <DropdownMenu.Trigger className="rounded-md border px-3 py-1.5">Actions</DropdownMenu.Trigger>
        <DropdownMenu.Portal>
          <DropdownMenu.Content sideOffset={6} className="rounded-md bg-zinc-800 p-1">
            <DropdownMenu.Item
              className="rounded px-3 py-1.5 outline-none data-[highlighted]:bg-zinc-700"
              onSelect={() => setConfirmOpen(true)}
            >
              Delete
            </DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu.Portal>
      </DropdownMenu.Root>

      <Dialog.Root open={confirmOpen} onOpenChange={setConfirmOpen}>
        <Dialog.Portal>
          <Dialog.Overlay className="fixed inset-0 bg-black/60" />
          <Dialog.Content className="fixed left-1/2 top-1/2 w-80 -translate-x-1/2 -translate-y-1/2 rounded-xl bg-zinc-900 p-6">
            <Dialog.Title className="text-lg font-semibold">Delete this row?</Dialog.Title>
            <Dialog.Description className="mt-1 text-sm text-zinc-400">This can't be undone.</Dialog.Description>
            <div className="mt-5 flex justify-end gap-2">
              <Dialog.Close className="rounded-md px-3 py-1.5">Cancel</Dialog.Close>
              <button
                className="rounded-md bg-red-600 px-3 py-1.5"
                onClick={() => {
                  onDelete();
                  setConfirmOpen(false);
                }}
              >
                Delete
              </button>
            </div>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </>
  );
}

components/body-lock-watch.tsx (dev only)

"use client";
import { useEffect } from "react";

// Logs a warning when <body> keeps pointer-events: none while no open
// Radix layer is on the page. Mount it once in your root layout in dev.
export function BodyLockWatch() {
  useEffect(() => {
    if (process.env.NODE_ENV === "production") return;
    const check = () => {
      const locked = document.body.style.pointerEvents === "none";
      const open = document.querySelector('[data-state="open"][role="dialog"], [data-state="open"][role="menu"], [data-state="open"][role="alertdialog"]');
      if (locked && !open) console.warn("body is still pointer-events: none with no open dialog. Run npm ls @radix-ui/react-dismissable-layer");
    };
    const mo = new MutationObserver(() => setTimeout(check, 400));
    mo.observe(document.body, { attributes: true, attributeFilter: ["style"] });
    return () => mo.disconnect();
  }, []);
  return null;
}

Good to know

Radix sets pointer-events: none on body while a modal layer is open and puts the old value back when the last one closes. The save and the count of open layers live in @radix-ui/react-dismissable-layer, so every Radix component in the app has to share one copy of it.
The usual way to get two copies: older shadcn/ui projects install one @radix-ui/react-* package per component, newer ones import from radix-ui, and a component pasted from v0, Lovable or a registry can bring its own pinned version.
document.body.style.pointerEvents = "" in onCloseAutoFocus unlocks the page too, but both copies stay installed and the next pair of overlapping layers can trip again. Use it only while you fix the versions.
What we ran on October 27, 2026: body-lock-watch.tsx type-checks with TypeScript 5.9.3 against @types/react 19.3.0 and next 15.5.28. Radix wasn't installed in that check, so row-actions.tsx wasn't type-checked here; it is the setup from our blog post, which was built with next build and clicked through in headless Chromium on radix-ui 1.8.1 with one and with two copies of DismissableLayer. We didn't test pnpm or Yarn overrides.

Check that pointer-events is the problem

Open DevTools while the page is stuck and read the body's computed pointer-events. If it says none and no dialog is on screen, this is your bug. Clearing the inline style unsticks the page for now, but it only hides the cause.

check in the browser console while the page is stuck

// 1. Is the body blocking clicks with no dialog open?
getComputedStyle(document.body).pointerEvents; // "none" means yes

// 2. Unstick the page for now (symptom only, keep reading):
document.body.style.pointerEvents = "";

Fix 1: dedupe @radix-ui/react-dismissable-layer

Run npm ls on the package. More than one version means two copies, each with its own count of open layers. The menu's copy and the dialog's copy each save and restore the body's value, and the last one to close puts back none.
Move every import to the radix-ui package if you can. If a dependency pins its own version, an npm override forces one copy. pnpm has pnpm.overrides and Yarn has resolutions for the same job.

terminal + package.json

# More than one version listed here is the usual cause:
npm ls @radix-ui/react-dismissable-layer

# package.json: force one copy (use the newest version npm ls shows)
{
  "overrides": {
    "@radix-ui/react-dismissable-layer": "1.2.1"
  }
}

# then
npm install
npm ls @radix-ui/react-dismissable-layer   # every line should say "deduped"

Render the Dialog next to the DropdownMenu, not inside the menu item, keep its open state in useState, and set it from the item's onSelect. That is the component at the top of this page.
modal={false} on DropdownMenu.Root means the menu never blocks clicks outside itself, so it never saves or restores anything on the body. For a small row menu that is usually what you want anyway.

Skip the confirm dialog

If the dialog is only there to stop an accidental delete, you can drop it. A five-second undo or a press-and-hold button does the same job, and with no overlay there is nothing left to lock the page.

Delete with undo in a Server Action

Where Stack Cart Drawer fits

A lot of these reports come from a cart built on Sheet or Dialog. Stack Cart Drawer doesn't use Radix at all. While it is open it puts the inert attribute on the page wrapper, and it takes it off when it closes, so one component owns that state and nothing on body can be left behind.
It ships with the full source and a PROMPT.md for Cursor or v0. If you only need free pieces with source, the free kit is MIT.

The free kit: Toast Stack, Pricing Switch, Upload Dropzone and more, MIT

Install

Copy from the zipPut react/src/components into src/, then none for the fix. The example uses the radix-ui package (one import for Dialog and DropdownMenu).
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

data: store name, products, free-shipping threshold
onCheckout: your payment call, resolve { ok: true }
autoplayDemo: loops the demo until the first tap

How qodesign compares

qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
qodesign vs Skiper UISkiper UI is best for: unusual interaction details for landing pages: image reveals, cursor trails, tooltips, drag-and-scroll galleries.

All comparisons, with prices read on each library's own site.

From the blog: Radix Dialog Leaves pointer-events: none on the Body? Here's the Fix

Questions

Why is my page unclickable after closing a shadcn dialog?

Radix left pointer-events: none on the body. In our tests that happened with two copies of @radix-ui/react-dismissable-layer and a menu that opened the dialog. Check with npm ls and dedupe to one version.

How do I remove pointer-events: none from the body?

Right now: document.body.style.pointerEvents = "" in the console. For good: one copy of DismissableLayer, or modal={false} on the menu that opens the dialog.

Should I open a Radix Dialog from a DropdownMenu item?

Yes. Render the Dialog next to the menu, keep its open state in useState and set it from the item's onSelect.

Does modal={false} fix the frozen page?

In our test it did, even with two copies installed, because a non-modal menu never changes the body's pointer events.

Does the cart drawer work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.

Fix pointer-events: none stuck on body after a Radix or shadcn Dialog closes

The pattern that doesn't lock the page

Good to know

Check that pointer-events is the problem

Fix 1: dedupe @radix-ui/react-dismissable-layer

Fix 2: open the dialog from state, with a non-modal menu

Skip the confirm dialog

Where Stack Cart Drawer fits

Install

Props

How qodesign compares

Questions

The pattern that doesn't lock the page

Good to know

Check that pointer-events is the problem

Fix 1: dedupe @radix-ui/react-dismissable-layer

Fix 2: open the dialog from state, with a non-modal menu

Skip the confirm dialog

Where Stack Cart Drawer fits

Install

Props

How qodesign compares

Questions