Preview

Installation

<> import.ts
import { Modal } from "@/components/ui/modal"

Code

<> component.tsx
import { Modal } from "@/components/ui/modal"

<Modal />

API Reference

Modal

Accessible modal dialog with backdrop and animated transitions.

<> import.ts
import { Modal, ModalTrigger } from "@/components/ui/modal"

Props

PropTypeDefaultDescription
title
string—Header title
children
React.ReactNode—Modal body
isOpen
boolean—Controls visibility
onClose
() => void—Called to close
showCloseButton
booleantrueShow header close icon
size
"sm" | "md" | "lg" | "xl""md"Dialog width
className
string""Additional CSS classes

Examples

Example 1
<> example.tsx
// Trigger wrapper
<ModalTrigger modalTitle="Edit" modalContent={<div>Content</div>}>
  <Button>Edit</Button>
</ModalTrigger>