Modal

A dialog component that is overlaid on the current page.

Source

Installation

npx @rahimstack@latest add modal

Usage

Outside interactions

You can allow outside interactions like scrolling by setting the allowOutsideInteraction prop to true. This will also make other elements visible to screen readers.

Example
<Modal
    {...props}
    allowOutsideInteraction
>
    {/*...*/}
</Modal>

Controlled

const [open, setOpen] = React.useState(false)
 
return (
    <Modal
        {...props}
        open={open}
        onOpenChange={setOpen}
    >
        {/*...*/}
    </Modal>
)

API Reference

const ModalAnatomy = defineStyleAnatomy({
    overlay: cva([
        "UI-Modal__overlay",
        "fixed inset-0 z-50 bg-black/80",
        "data-[state=open]:animate-in data-[state=closed]:animate-out",
        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
        "overflow-y-auto p-0 md:p-4 grid place-items-center",
    ]),
    content: cva([
        "UI-Modal__content",
        "z-50 grid relative w-full w-full shadow-xl border border-[rgb(255_255_255_/_5%)] max-w-lg gap-4 bg-[--background] p-6 shadow-xl duration-200",
        "data-[state=open]:animate-in data-[state=closed]:animate-out",
        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
        "sm:rounded-lg",
    ], {
        variants: {
            size: { sm: null, md: null, lg: null, xl: null, full: "w-[90%]" },
        },
        defaultVariants: {
            size: "md",
        },
        compoundVariants: [
            { size: "sm", className: "sm:max-w-sm" },
            { size: "md", className: "sm:max-w-lg" },
            { size: "lg", className: "sm:max-w-2xl" },
            { size: "xl", className: "sm:max-w-5xl" },
            { size: "full", className: "max-w-full w-full" },
            { size: "full", className: "max-w-full w-full" },
        ],
    }),
    close: cva([
        "UI-Modal__close",
        "absolute right-4 top-4 !mt-0",
    ]),
    header: cva([
        "UI-Modal__header",
        "flex flex-col space-y-1.5 text-center sm:text-left",
    ]),
    footer: cva([
        "UI-Modal__footer",
        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
    ]),
    title: cva([
        "UI-Modal__title",
        "text-xl font-semibold leading-none tracking-tight",
    ]),
    description: cva([
        "UI-Modal__description",
        "text-sm text-[--muted]",
    ]),
})