Overlay

A responsive overlay component that adapts between modal, popover, and drawer based on screen size.

On this page

Props

type

mobileType

<Dialog>
  <Button>Open Overlay</Button>
  <Overlay>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Overlay Title</DialogTitle>
        <DialogDescription>This overlay adapts based on screen size.</DialogDescription>
      </DialogHeader>
      <DialogBody>
        <p>Overlay content goes here.</p>
      </DialogBody>
      <DialogFooter>
        <Button slot="close">Close</Button>
      </DialogFooter>
    </DialogContent>
  </Overlay>
</Dialog>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/overlay

Usage

Use Overlay as a responsive wrapper that automatically switches between Modal, Popover, and Drawer based on screen size and configuration.

import { Button } from '@/components/ui/button'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import { Overlay } from '@/components/ui/overlay'

<Dialog>
  <Button>Open Overlay</Button>
  <Overlay type="modal" mobileType="drawer">
    <DialogContent>Overlay content</DialogContent>
  </Overlay>
</Dialog>

Examples

API Reference

An overlay renders its content in a modal, popover, or drawer, switching between types based on screen size.

Prop	Type	Default
	`Type`	`'modal'`
	`Type \| null`	`'drawer'`
	`Omit<PopoverProps, "children" \| CommonProps>`	`—`
	`Omit<ModalProps, "children" \| CommonProps>`	`—`
	`Omit<DrawerProps, "children" \| CommonProps>`	`—`
	`boolean`	`false`
	`boolean`	`false`
	`function`	`—`

Last updated on 6/16/2026