Dialog

Show a modal with configurable layout and accessible actions.

yarn add @tamagui/dialog

yarn add tamagui

yarnnpmbunpnpm

Show DialogShow Dialog (No Adapt)

import { ChevronDown, X } from '@tamagui/lucide-icons'
import {
  Adapt,
  Button,
  Dialog,
  Fieldset,
  Input,
  Label,
  Paragraph,
  Select,
  Sheet,
  TooltipSimple,
  Unspaced,
  View,
  XStack,
} from 'tamagui'
import { SelectDemoItem } from './SelectDemo'

export function DialogDemo() {
  return (
    <View gap="$4" justifyContent="center" alignItems="center">
      <DialogInstance />
      <DialogInstance disableAdapt />
    </View>
  )
}

function DialogInstance({ disableAdapt }: { disableAdapt?: boolean }) {
  return (
    <Dialog modal>
      <Dialog.Trigger asChild>
        <Button>Show Dialog{disableAdapt ? ` (No Adapt)` : ''}</Button>
      </Dialog.Trigger>

      {!disableAdapt && (
        <Adapt when="maxMd" platform="touch">
          <Sheet animation="medium" zIndex={200000} modal dismissOnSnapToBottom>
            <Sheet.Frame padding="$4" gap="$4">
              <Adapt.Contents />
            </Sheet.Frame>
            <Sheet.Overlay
              backgroundColor="$shadow6"
              animation="lazy"
              enterStyle={{ opacity: 0 }}
              exitStyle={{ opacity: 0 }}
            />
          </Sheet>
        </Adapt>
      )}

      <Dialog.Portal>
        <Dialog.Overlay
          key="overlay"
          backgroundColor="$shadow6"
          animateOnly={['transform', 'opacity']}
          animation={[
            'quicker',
            {
              opacity: {
                overshootClamping: true,
              },
            },
          ]}
          enterStyle={{ opacity: 0 }}
          exitStyle={{ opacity: 0 }}
        />

        <Dialog.Content
          bordered
          w={400}
          elevate
          borderRadius="$6"
          key="content"
          animateOnly={['transform', 'opacity']}
          animation={[
            'quicker',
            {
              opacity: {
                overshootClamping: true,
              },
            },
          ]}
          enterStyle={{ x: 0, y: 20, opacity: 0 }}
          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
          gap="$4"
        >
          <Dialog.Title>Edit profile</Dialog.Title>
          <Dialog.Description>
            Make changes to your profile here. Click save when you're done.
          </Dialog.Description>

          <Fieldset gap="$4" horizontal>
            <Label width={64} htmlFor="name">
              Name
            </Label>
            <Input flex={1} id="name" defaultValue="Nate Wienert" />
          </Fieldset>

          <Fieldset gap="$4" horizontal>
            <Label width={64} htmlFor="username">
              <TooltipSimple label="Pick your favorite" placement="bottom-start">
                <Paragraph>Food</Paragraph>
              </TooltipSimple>
            </Label>
            <XStack flex={1}>
              <SelectDemoItem
                trigger={
                  <Select.Trigger flex={1} iconAfter={ChevronDown}>
                    <Select.Value placeholder="Something" />
                  </Select.Trigger>
                }
              />
            </XStack>
          </Fieldset>

          <XStack alignSelf="flex-end" gap="$4">
            <DialogInstance />

            <Dialog.Close displayWhenAdapted asChild>
              <Button theme="accent" aria-label="Close">
                Save changes
              </Button>
            </Dialog.Close>
          </XStack>

          <Unspaced>
            <Dialog.Close asChild>
              <Button position="absolute" right="$3" size="$2" circular icon={X} />
            </Dialog.Close>
          </Unspaced>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog>
  )
}

Features

Comes with styling, yet completely customizable and themeable.

Accepts animations, themes, size props and more.

Accessible with dev-time checks to ensure ARIA props.

Dialog does not work on native, instead you can Adapt it to a Sheet as shown in the demo code above.

Installation

Dialog is already installed in tamagui, or you can install it independently:


yarn add @tamagui/dialog

In order to use this component independently of tamagui, you'll first need to install the @tamagui/portal package:


yarn add @tamagui/portal

Then add PortalProvider to the root of your app:

App.tsx
import { PortalProvider } from '@tamagui/portal'
import YourApp from './components/YourApp'

function App() {
  return (
    <PortalProvider shouldAddRootHost>
      <YourApp />
    </PortalProvider>
  )
}

export default App

Anatomy

import { Dialog } from 'tamagui' // or '@tamagui/dialog'

export default () => (
  <Dialog>
    <Dialog.Trigger />
    <Dialog.Portal>
      <Dialog.Overlay />
      <Dialog.Content>
        <Dialog.Title />
        <Dialog.Description />
        <Dialog.Close />
        {/* ... */}
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog>
)

API Reference

Dialog

Contains every component for the dialog. Beyond Tamagui Props, adds:

Props

children (required)

React.ReactNode

Must contain Dialog.Content

size

SizeTokens

Passes size down too all sub-components when set for padding, arrow, borderRadius

open

boolean

defaultOpen

boolean

onOpenChange

(open: boolean) => void

modal

boolean

Default:

true

Renders into root of app instead of inline

disableRemoveScroll

boolean

Used to disable the automatic removal of scrolling from the page when open.

Dialog.Portal

Renders Dialog into appropriate container. Beyond Tamagui Props, adds:

Props

forceMount

boolean

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

unstyled

boolean

Removes all default Tamagui styles.

Dialog.Content

Main container for Dialog content, this is where you should apply animations.

Beyond Tamagui Props, adds:

Props

forceMount

boolean

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

unstyled

boolean

Removes all default Tamagui styles.

Dialog.Overlay

Displays behind Content. Beyond Tamagui Props, adds:

Props

forceMount

boolean

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Dialog.Title

Required. Can wrap in VisuallyHidden to hide.

Defaults to H2, see Headings.

Dialog.Description

Required. Can wrap in VisuallyHidden to hide.

Defaults to Paragraph, see Paragraph.

Dialog.Close

Closes the Dialog, accepts the same props as YStack. Recommended to use with your own component and asChild.

Props

displayWhenAdapted

boolean

By default Close elements hide when Adapt is active. If set to true, they will show when adapted.

Just Tamagui Props.

Dialog.Sheet

When used with Adapt, Dialog will render as a sheet when that breakpoint is active.

See Sheet for more props.

Must use Adapt.Contents inside the Dialog.Sheet.Frame to insert the contents given to Dialog.Content

import { Dialog } from 'tamagui' // or '@tamagui/dialog'

export default () => (
  <Dialog>
    <Dialog.Trigger />

    <Dialog.Portal>
      <Dialog.Overlay />
      <Dialog.Content>
        <Dialog.Title />
        <Dialog.Description />
        <Dialog.Close />
        {/* ... */}
      </Dialog.Content>
    </Dialog.Portal>

    {/* optionally change to sheet when small screen */}
    <Dialog.Adapt when="maxMd">
      <Dialog.Sheet>
        <Dialog.Sheet.Frame>
          <Dialog.Adapt.Contents />
        </Dialog.Sheet.Frame>
        <Dialog.Sheet.Overlay />
      </Dialog.Sheet>
    </Dialog.Adapt>
  </Dialog>
)

Note that Dialog.Sheet currently doesn't preserve state of the contents when it transitions between Sheet and Portal. In the future, we can do this on the web using react-reparenting.

Props

shouldAddRootHost

boolean

Defines whether to add a default root host or not.

Examples

If you're using native modals (maybe from react-navigation), you'll notice the Dialogs won't show up inside the modal. To get around this, you should wrap your screen inside PortalProvider, like so:

import { PortalProvider } from 'tamagui'

// this component used in react-navigation/expo-router with `presentation: "modal"`
export function Page() {
  return (
    <PortalProvider>
      {/* rest of your page, including the Dialog... */}
    </PortalProvider>
  )
}

AlertDialog

Popover

Edit this page on GitHub.

Forms

Panels

Organize

Content

Visual

Etc

Dialog

Features

Installation

Anatomy

API Reference

Dialog

Props

children (required)

size

open

defaultOpen

onOpenChange

modal

disableRemoveScroll

Dialog.Trigger

Dialog.Portal

Props

forceMount

unstyled

Dialog.Content

Props

forceMount

unstyled

Dialog.Overlay

Props

forceMount

Dialog.Title

Dialog.Description

Dialog.Close

Props

displayWhenAdapted

Dialog.Sheet

PortalProvider

Props

shouldAddRootHost

Examples

Inside native modals