UI Components

Modal Components Showcase

Explore all modal variants and implementations available in the Lex Protector Portal. Built with Radix UI primitives and shadcn/ui styling.

Modal Sizes

Different modal sizes for various content types and screen sizes.

Special Modal Types

Specialized modals for common use cases and interactions.

Implementation Guide

Quick reference for implementing modals in your components.

Basic Modal Usage

import { Modal, ModalContent, ModalHeader, ModalTitle } from "@/components/ui/modal";

const [isOpen, setIsOpen] = useState(false);

<Modal open={isOpen} onOpenChange={setIsOpen}>
  <ModalContent size="md">
    <ModalHeader>
      <ModalTitle>Modal Title</ModalTitle>
    </ModalHeader>
    <div className="p-6">
      Your content here
    </div>
  </ModalContent>
</Modal>