Modal Component

A flexible modal dialog component with multiple sizes and customization options.

Installation

pnpm → pnpm dlx pacmanui add modal
npm  → npx pacmanui add modal

API Reference

PROPTYPEDEFAULTDESCRIPTION
isOpenbooleanrequiredControls the visibility of the modal
onClose() => voidrequiredFunction called when the modal is closed
titlestringundefinedTitle displayed at the top of the modal
descriptionstringundefinedDescription text below the title
size'sm' | 'md' | 'lg' | 'xl' | 'full''md'Controls the size of the modal
closeOnOutsideClickbooleanfalseWhether clicking outside the modal should close it
classNamestringundefinedAdditional CSS classes to apply to the modal

Examples

Basic Modal

A simple modal with title and content

'use client'

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

export default function ModalExample() {
  const { isOpen, open, close } = useModal()
  
  return (
    <>
      <Button onClick={open}>Open Modal</Button>
      <Modal
        isOpen={isOpen}
        onClose={close}
        title="Basic Modal"
        description="This is a basic modal example"
      >
        <div className="p-4">
          <p>Modal content goes here</p>
        </div>
      </Modal>
    </>
  )
}

Close on Outside Click

A modal that can be closed by clicking outside

'use client'

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

export default function CloseOnOutsideExample() {
  const { isOpen, open, close } = useModal()
  
  return (
    <>
      <Button onClick={open}>Open Modal</Button>
      <Modal
        isOpen={isOpen}
        onClose={close}
        title="Click Outside"
        description="Click outside the modal to close it"
        closeOnOutsideClick={true}
      >
        <div className="p-4">
          <p>Try clicking outside this modal to close it</p>
        </div>
      </Modal>
    </>
  )
}

Modal Sizes

Modals with different sizes: sm, md, lg, xl, and full

'use client'

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

export default function ModalSizesExample() {
  const smallModal = useModal()
  const mediumModal = useModal()
  const largeModal = useModal()
  const xlModal = useModal()
  const fullModal = useModal()

  return (
    <div className="flex flex-wrap gap-4">
      <Button onClick={smallModal.open}>Small Modal</Button>
      <Modal
        isOpen={smallModal.isOpen}
        onClose={smallModal.close}
        title="Small Modal"
        size="sm"
      >
        <div className="p-4">
          <p>This is a small modal</p>
        </div>
      </Modal>

      {/* Add other size examples similarly */}
    </div>
  )
}

Custom Modal

A modal with custom styling and content layout

'use client'

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

export default function CustomModalExample() {
  const { isOpen, open, close } = useModal()

  return (
    <>
      <Button onClick={open}>Custom Modal</Button>
      <Modal
        isOpen={isOpen}
        onClose={close}
        title="Custom Modal"
        className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20"
      >
        <div className="space-y-4">
          <p className="text-slate-600 dark:text-slate-400">
            This modal has custom background styling and content layout.
          </p>
          <div className="flex justify-end space-x-2">
            <Button variant="outline" onClick={close}>Cancel</Button>
            <Button onClick={close}>Confirm</Button>
          </div>
        </div>
      </Modal>
    </>
  )
}