A responsive overlay component that adapts between modal, popover, and drawer based on screen size.
<Dialog>
<Button>Open overlay</Button>
<Overlay>
<DialogContent>some content</DialogContent>
</Overlay>
</Dialog>npx shadcn@latest add @dotui/overlayUse 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>Use the controls below to experiment with different overlay props and see the live preview and code update.
The type of overlay to display on desktop.
TypeThe type of overlay to display on mobile. Set to null to disable.
Type | null<Dialog>
<Button>Open Overlay</Button>
<Overlay type="modal" mobileType="drawer">
<DialogContent>
<DialogHeader>
<DialogHeading>Overlay Title</DialogHeading>
<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>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 | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.