Modal

pnpmnpmyarnbun
Copy to Clipboard
pnpm dlx shadcn@latest add @motokoui/modal

Copy to Clipboardimport { Button } from "@/components/ui/button"
import {
  Modal,
  ModalClose,
  ModalContent,
  ModalDescription,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTrigger,
} from "@/components/ui/modal"
 
export default function Example() {
  return (
    <Modal>
      <ModalTrigger asChild>
        <Button>Open modal</Button>
      </ModalTrigger>
      <ModalContent>
        <ModalHeader>
          <ModalTitle>Confirm changes</ModalTitle>
          <ModalDescription>
            This will update your workspace settings.
          </ModalDescription>
        </ModalHeader>
        <ModalFooter>
          <ModalClose asChild>
            <Button variant="secondary">Cancel</Button>
          </ModalClose>
          <Button>Save changes</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

Copy to Clipboard<Modal>
  <ModalTrigger />
  <ModalContent>
    <ModalHeader>
      <ModalTitle />
      <ModalDescription />
    </ModalHeader>
    <ModalFooter>
      <ModalClose />
    </ModalFooter>
  </ModalContent>
</Modal>