Component

Modal

A focused dialog surface with animation, close controls, size options, and contextual variants.

Examples

Live previews paired with copyable source.

Basic Modal

Open and close a dialog with a title, description, and action row.

tsx

const modal = useModal()

<Button onClick={modal.open}>Open Modal</Button>
<Modal
  isOpen={modal.isOpen}
  onClose={modal.close}
  title="Project settings"
  description="Review changes before saving."
>
  <Button onClick={modal.close}>Save</Button>
</Modal>

Sizes

Pick a width that matches the complexity of the content.

tsx

<Modal isOpen={isOpen} onClose={close} title="Small modal" size="sm" />
<Modal isOpen={isOpen} onClose={close} title="Large modal" size="lg" />

API Reference

Props available on the component.

Prop	Type	Default	Description
isOpen	boolean	required	Controls whether the dialog is visible.
onClose	() => void	required	Called when the modal requests to close.
title	string	undefined	Optional dialog heading.
description	string	undefined	Optional supporting text below the title.
size	'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'	'md'	Controls the dialog width.
variant	'default' \| 'destructive' \| 'success'	'default'	Applies contextual surface and text colors.
closeOnOutsideClick	boolean	false	Allows clicking the backdrop to close the modal.
showClose	boolean	true	Shows or hides the close icon button.

Install

bash

pnpm dlx pacmanui add modal
npx pacmanui add modal

Basic Usage

tsx

import { Modal, useModal } from '@/components/pacmanui/modal'

export default function Example() {
  const modal = useModal()
  return <Modal isOpen={modal.isOpen} onClose={modal.close} />
}