Modal

Accessible modal overlay used by UserButton and OrgSwitcher.

The <Modal> component is a portal-based overlay with focus trapping, escape-to-close, and backdrop dismissal. It is used internally by <UserButton> and <OrgSwitcher> when profile mode is "modal", and is exported for custom dialogs.

Installation

pnpm add @wocha/ui @wocha/react

Or scaffold with the CLI

npx @wocha/cli init --framework nextjs

import { Modal } from "@wocha/ui";

Basic usage

const [open, setOpen] = useState(false);
 
<Modal open={open} onClose={() => setOpen(false)}>
  <UserProfile />
</Modal>

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the modal is visible
`onClose`	`() => void`	—	Called when the user dismisses the modal
`children`	`ReactNode`	—	Modal content
`className`	`string`	—	Additional class on the panel element

Built-in usage

You typically do not render <Modal> directly — use profile mode props instead:

// User profile in modal
<UserButton userProfileMode="modal" />
 
// Organisation profile in modal
<OrgSwitcher organisationProfileMode="modal" />

Forward props to the embedded profile:

<UserButton
  userProfileMode="modal"
  userProfileProps={{
    sections: ["profile", "security"],
    passwordSettingsUrl: "/account/password",
  }}
/>

Accessibility

The modal traps focus, closes on Escape, restores focus on close, and sets aria-modal="true". The backdrop is a separate dismiss button.

Framework notes

Client-only component (uses createPortal). Import in "use client" files for Next.js.