Modal

Opinionated dialog wrapper with size variants (sm, default, lg, xl, full) and positioned at center. Built on Radix Dialog.

Import

import {
  Modal,
  ModalClose,
  ModalContent,
  ModalDescription,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTrigger,
} from "poyraz-ui/molecules";

Size Variants

Small, default, and large modal sizes.

<Modal>
  <ModalTrigger asChild>
    <Button variant="outline">Default Modal</Button>
  </ModalTrigger>
  <ModalContent>
    <ModalHeader>
      <ModalTitle>Default Modal</ModalTitle>
      <ModalDescription>Standard size.</ModalDescription>
    </ModalHeader>
    <p>Modal content here.</p>
    <ModalFooter>
      <ModalClose asChild>
        <Button variant="outline">Cancel</Button>
      </ModalClose>
      <Button>Save</Button>
    </ModalFooter>
  </ModalContent>
</Modal>
pnpm dlx shadcn@latest add @poyraz/modal

Runtime dependencies

@radix-ui/react-dialog@^1.1.15, class-variance-authority@^0.7.1, lucide-react@^0.574.0

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme, @poyraz/poyraz-recipes

Installed files

@ui/molecules/modal.tsx