# Modal A modal is an overlay element which blocks interaction with elements outside it. ## Vanilla CSS example ```tsx import {DialogTrigger} from 'react-aria-components/Modal'; import {Modal} from 'vanilla-starter/Modal'; import {Dialog, Heading} from 'vanilla-starter/Dialog'; import {Form} from 'vanilla-starter/Form'; import {TextField} from 'vanilla-starter/TextField'; import {Button} from 'vanilla-starter/Button'; function Example(props) { return ( ); } ``` ### Modal.tsx ```tsx 'use client'; import {Modal as RACModal, type ModalOverlayProps} from 'react-aria-components/Modal'; import './Modal.css'; export function Modal(props: ModalOverlayProps) { return ; } ``` ### Modal.css ```css @import './theme.css'; .react-aria-ModalOverlay { position: absolute; top: 0; left: 0; width: var(--page-width); height: var(--page-height); background: rgba(0 0 0 / 0.5); overflow: clip; z-index: 100; font-family: system-ui; font-size: var(--font-size); &[data-entering] { animation: modal-fade 200ms; } &[data-exiting] { animation: modal-fade 150ms reverse ease-in; } } .react-aria-Modal { position: sticky; max-height: calc(var(--visual-viewport-height) * 0.9); top: calc(var(--visual-viewport-height) / 2); margin-left: 50vw; translate: -50% -50%; box-shadow: 0 8px 32px rgba(0 0 0 / 0.2); border-radius: var(--radius-xl); background: var(--overlay-background); color: var(--text-color); outline: 1px solid var(--overlay-border); width: max-content; max-width: min(500px, 90vw); &[data-entering] { animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .react-aria-TextField { margin-bottom: 8px; } } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-zoom { from { transform: scale(0.8); } to { transform: scale(1); } } ``` ## Tailwind example ```tsx import {DialogTrigger} from 'react-aria-components/Modal'; import {Modal} from 'tailwind-starter/Modal'; import {Dialog, Heading} from 'tailwind-starter/Dialog'; import {Form} from 'tailwind-starter/Form'; import {TextField} from 'tailwind-starter/TextField'; import {Button} from 'tailwind-starter/Button'; function Example(props) { return ( ); } ``` ### Modal.tsx ```tsx 'use client'; import React from 'react'; import {ModalOverlay, type ModalOverlayProps, Modal as RACModal} from 'react-aria-components/Modal'; import {tv} from 'tailwind-variants'; const overlayStyles = tv({ base: 'absolute top-0 left-0 w-full h-(--page-height) isolate z-20 bg-black/[50%] text-center backdrop-blur-lg', variants: { isEntering: { true: 'animate-in fade-in duration-200 ease-out' }, isExiting: { true: 'animate-out fade-out duration-200 ease-in' } } }); const modalStyles = tv({ base: 'font-sans w-full max-w-[min(90vw,450px)] max-h-[calc(var(--visual-viewport-height)*.9)] rounded-2xl bg-white dark:bg-neutral-800/70 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas] text-left align-middle text-neutral-700 dark:text-neutral-300 shadow-2xl bg-clip-padding border border-black/10 dark:border-white/10', variants: { isEntering: { true: 'animate-in zoom-in-105 ease-out duration-200' }, isExiting: { true: 'animate-out zoom-out-95 ease-in duration-200' } } }); export function Modal(props: ModalOverlayProps) { return (

); } ``` ## Sheet Overlays such as trays, drawers, and sheets can be built using a `Modal` with custom entry and exit animations. ```tsx import {DialogTrigger} from 'react-aria-components/Modal'; import {Sheet, Heading} from 'vanilla-starter/Sheet'; import {Button} from 'vanilla-starter/Button'; Notice

This is a modal with a custom modal overlay.

``` ## Controlled Use the `isOpen` prop to show a modal programmatically or mount in a different part of the JSX tree (e.g. outside a menu). ```tsx import {useState} from 'react'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Modal} from 'vanilla-starter/Modal'; import {Dialog, Heading} from 'vanilla-starter/Dialog'; import {Button} from 'vanilla-starter/Button'; function Example() { let [isOpen, setOpen] = useState(false); return ( <> setOpen(true)}>Open dialog… ); } ``` ## Custom trigger `DialogTrigger` works with any pressable React Aria component (e.g. [Button](Button.md), [Link](Link.md), etc.). Use the `` component or [usePress](usePress.md) hook to wrap a custom trigger element such as a third party component or DOM element. ```tsx "use client" import {Pressable, DialogTrigger} from 'react-aria-components/Modal'; import {Modal} from 'vanilla-starter/Modal'; import {Dialog, Heading} from 'vanilla-starter/Dialog'; import {Button} from 'vanilla-starter/Button'; {/*- begin highlight -*/} Custom trigger {/*- end highlight -*/} ``` Accessibility Any `` child must have an [interactive ARIA role](https://www.w3.org/TR/wai-aria-1.2/#widget_roles) or use an appropriate semantic HTML element so that screen readers can announce the trigger. Trigger components must forward their `ref` and spread all props to a DOM element. ```tsx const CustomTrigger = React.forwardRef((props, ref) => (