ModalWrapper

A styled MUI Dialog with a consistent header, close button, and body scroll behaviour. Use it as the base for all application modals.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { ModalWrapper } from "@xocialive/ui-components";

Basic usage

const { open, onOpen, onClose } = useDisclosure();

<Button onClick={onOpen}>Open modal</Button>

<ModalWrapper
  open={open}
  onClose={onClose}
  title="Edit User"
  maxWidth="sm"
>
  <UserEditForm onSuccess={onClose} />
</ModalWrapper>

Props

Prop	Type	Default	Description
open	boolean	—	Controls modal visibility
onClose	() => void	—	Called when the user dismisses the modal
title	string	—	Modal header title
maxWidth	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Maximum modal width
fullWidth	boolean	true	Expand to maxWidth
children	ReactNode	—	Modal body content
actions	ReactNode	—	Footer action area (outside children scroll)
sx	SxProps<Theme>	—	Root style overrides

See also

• useDisclosure — hook for open/close state
• ConfirmationModal