dotUI

Overlay

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

Overview

Examples

<Dialog>
  <Button>Open overlay</Button>
  <Overlay>
    <DialogContent>some content</DialogContent>
  </Overlay>
</Dialog>

Installation

npm

pnpm

yarn

bun

pnpm dlx 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>

Playground

Use the controls below to experiment with different overlay props and see the live preview and code update.

type

mobileType

<Dynamic(Dialog)>
  <Dynamic(Button)>Open Overlay</Dynamic(Button)>
  <Dynamic(Overlay) type="modal" mobileType="drawer">
    <Dynamic(DialogContent)>
      <Dynamic(DialogHeader)>
        <Dynamic(DialogHeading)>Overlay Title</Dynamic(DialogHeading)>
        <Dynamic(DialogDescription)>This overlay adapts based on screen size.</Dynamic(DialogDescription)>
      </Dynamic(DialogHeader)>
      <Dynamic(DialogBody)>
        <p>Overlay content goes here.</p>
      </Dynamic(DialogBody)>
      <Dynamic(DialogFooter)>
        <Dynamic(Button) slot="close">Close</Dynamic(Button)>
      </Dynamic(DialogFooter)>
    </Dynamic(DialogContent)>
  </Dynamic(Overlay)>
</Dynamic(Dialog)>

API Reference

Missing description.

Prop	Type	Default
	`Type`	`'modal'`
	`Type \| null`	`'drawer'`
	`Omit<PopoverProps, "children" \| CommonProps>`	`—`
	`Omit<ModalProps, "children" \| CommonProps>`	`—`
	`Omit<DrawerProps, "children" \| CommonProps>`	`—`
	`boolean`	`false`
	`((element: Element) => boolean)`	`—`
	`boolean`	`false`

dotUI

Overlay

Installation

Usage

Playground

type

mobileType

API Reference

On this page

On this page

dotUI

Product

Community

Support