Skip to content
Drivn logoDrivn
2 min read

React Overlay Components — Dialogs, Drawers, Popovers

Overlay components for React — Dialog, Drawer, Popover, Tooltip, Context Menu. Zero runtime dependencies, dot notation API, copy and own the source.

An overlay is any UI surface that floats above the page and traps the user's attention until dismissed. In a typical React application you need at least four of them: a modal Dialog for confirmations, a side Drawer for navigation on mobile, a Popover for inline menus and filters, and a Tooltip for hover hints. Most component libraries bundle these together but layer them on top of Radix or Floating UI, adding several kilobytes of runtime code to every page.

Drivn ships each overlay as a standalone, copy-paste component with zero runtime UI dependencies. You own the source after npx drivn add, every overlay uses the same dot notation API (Dialog.Trigger, Drawer.Content, Popover.Close), and focus management is handled with plain React hooks instead of a primitives package. This page is the hub for all overlay components in Drivn: each one is linked below with a short description, and the shared installation and theming guides apply to every overlay equally.

When to use which overlay

Pick a dialog for blocking decisions that demand attention — delete confirmations, auth flows, or required input. Use a drawer for secondary navigation on mobile or for edit panels that benefit from more vertical space than a dialog. A popover suits inline menus, color pickers, or filter surfaces that belong next to the trigger. A tooltip is for short hover hints only — if the content needs a click to reveal, use a popover instead.

Each overlay in Drivn follows the same mental model: a trigger element, a content panel, and explicit open/close control. The API is the same, so moving between them as requirements evolve is a rename and nothing else.

Shared primitives

Every Drivn overlay composes the same building blocks: a portal for z-index sanity, focus trap on open, Escape-key dismissal, and a click-outside handler. These are implemented inline in each component — there is no shared wrapper package to version-lock you. That means adjusting, say, the backdrop blur or the escape behavior happens in your own repo, not upstream.

The overlays use CSS custom properties from the Drivn theming system so their backdrop color, border, and radius come from the same tokens as the rest of your site. Dark mode is automatic via data-theme; no variant props needed.

Every overlay in Drivn is under 4 kB minified and tree-shaken. Install only what you use — there is no all-in-one overlay bundle.

Install an overlay

Use the Drivn CLI to add any single overlay to your project. The component is copied into your src/components/ui/ folder and you own it from that point forward. Install dependencies are auto-detected — Drivn components depend only on React and Tailwind CSS, so you almost never need anything else. Each overlay is self-contained, so installing the Dialog does not pull in a Drawer or Popover you will not use.

1npx drivn add dialog
2npx drivn add drawer
3npx drivn add popover
4npx drivn add tooltip

All overlay components

The full list of overlay-family components in Drivn. Each page has a live preview, full props reference, and the copy-paste source. Start with Dialog for the most common case, then browse the rest as needs arise.

Because the API is consistent across the family, once you have used one overlay you can use them all — same triggers, same content pattern, same open/close props.

Get started

Install Drivn in one command

Copy the source into your project and own every line. Zero runtime dependencies, pure React + Tailwind.

npx drivn@latest create

Requires Node 18+. Works with npm, pnpm, and yarn.

Enjoying Drivn?
Star the repo on GitHub to follow new component releases.
Star →