A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.


  • Focus is automatically trapped.
  • Works in an uncontrolled way by default.
  • Can also be controlled.

Install the component from your command line.

npm install @radix-ui/react-dialog

Import the components and piece the parts together.

import * as Dialog from '@radix-ui/react-dialog';
export default () => (
<Dialog.Trigger />
<Dialog.Overlay />
<Dialog.Close />

Create your styled dialog component from the dialog primitives.

import { styled } from 'path-to/stitches.config';
import * as Dialog from '@radix-ui/react-dialog';
const StyledOverlay = styled(Dialog.Overlay, {
backgroundColor: 'rgba(0, 0, 0, .15)',
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
const StyledContent = styled(Dialog.Content, {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
minWidth: 200,
maxWidth: 'fit-content',
maxHeight: '85vh',
padding: 20,
marginTop: '-5vh',
backgroundColor: 'white',
borderRadius: 6,
'&:focus': {
outline: 'none',
export default () => (
<StyledOverlay />
<p>Dialog content</p>

Contains all the parts of a dialog.

defaultOpenbooleanNo default value
openbooleanNo default value
onOpenChangefunctionNo default value
idstringNo default value

The button that opens the dialog.


A layer that covers the inert portion of the view when the dialog is open.

forceMountbooleanNo default value

Contains content to be rendered in the open dialog.

forceMountbooleanNo default value
onOpenAutoFocusfunctionNo default value
onCloseAutoFocusfunctionNo default value
onEscapeKeyDownfunctionNo default value
onPointerDownOutsidefunctionNo default value

The button that closes the dialog.


Adheres to the Dialog WAI-ARIA design pattern.

SpaceOpens/closes the dialog.
EnterOpens/closes the dialog.
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
EscCloses the dialog and moves focus to Dialog.Trigger.

Create your own API by abstracting the primitive parts into your own component.

This example abstracts the Dialog.Overlay and Dialog.Close parts.


import { Dialog, DialogTrigger, DialogContent } from './your-dialog';
export default () => (
<DialogTrigger>Dialog trigger</DialogTrigger>
<DialogContent>Dialog Content</DialogContent>


// your-dialog.js
import React from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { Cross1Icon } from '@radix-ui/react-icons';
export function Dialog({ children, ...props }) {
return (
<DialogPrimitive.Root {...props}>
<DialogPrimitive.Overlay />
export const DialogContent = React.forwardRef(
({ children, ...props }, forwardedRef) => (
<DialogPrimitive.Content {...props} ref={forwardedRef}>
<Cross1Icon />
export const DialogTrigger = DialogPrimitive.Trigger;
export const DialogClose = DialogPrimitive.Close;