Modal

Accessible dialog overlay. Traps focus within the dialog, closes on Escape key press, locks background scroll, and restores it on unmount.

Preview

Usage

jsx

import { Modal } from '@/components/ui'
import { useState } from 'react'

function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button class="text-sky-300">onClick={() => setOpen(true)}>Open</Button>
      <Modal
        class="text-sky-300">open={open}
        class="text-sky-300">onClose={() => setOpen(false)}
        class="text-sky-300">title="Confirm"
        class="text-sky-300">size="sm"
      >
        <p>Are you sure?</p>
      </Modal>
    </>
  )
}

Props

Prop	Type	Default	Description
open*	boolean	—	Controls visibility.
onClose*	() => void	—	Called when the user dismisses the modal.
title	string	—	Dialog title (used for aria-labelledby).
size	'sm' \| 'md' \| 'lg'	'md'	Max width of the dialog.