Modal
A dialog component that is overlaid on the current page.
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",
]),
content: cva([
"UI-Modal__content",
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-[--background] p-6 shadow-lg 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",
"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
"sm:rounded-[--radius]",
]),
close: cva([
"UI-Modal__close",
"absolute right-4 top-4",
]),
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]",
]),
})