Component

Modal

A full-screen sheet that rises to cover the entire viewport, with a nav bar carrying a centered title and a Done button to dismiss.

The primitive

modal.tsx

<NativeModal open={open} onClose={() => setOpen(false)} title="Settings">
  <div className="p-4">...</div>
</NativeModal>

Example

Editing account details opens this full-screen, listing every editable field with a Done button as the only way out.

modal-example.tsx

<NativeModal open={open} onClose={() => setOpen(false)} title="Account details">
  <NativeRow label="Legal name" sublabel={account.legalName} />
  <NativeRow label="Account number" sublabel={account.number} />
</NativeModal>

Capabilities

Prop	Type	Description
openrequired	boolean	—
onCloserequired	() => void	—
title	string	—
showDone	boolean	Show the "Done" / close button in top-right
doneLabel	string	—
childrenrequired	React.ReactNode	—
className	string	—