Skip to content
Drivn
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.

Overlays are the surfaces that float above your page and hold focus until the user acts — a modal Dialog for a confirmation, a side Drawer for mobile navigation, a Popover for an inline filter, a Tooltip for a hover hint. Almost every React app needs several at once, and most component libraries deliver them stacked on top of Radix or Floating UI. That convenience costs you kilobytes of runtime primitives on every route and a versioned dependency you cannot edit.

Drivn takes the opposite approach. Each overlay is a standalone component you install with npx drivn add and own outright — no shared primitives package, no runtime UI dependency. They share one dot notation API (Dialog.Trigger, Drawer.Content, Popover.Close), and focus trapping, Escape dismissal, and click-outside are written with plain React hooks you can read and change. This page is the hub for the whole overlay family: every component is listed below with a one-line summary, and the installation and theming steps here apply to all of them equally. Start with the overlay closest to your problem and add the rest as they come up.

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

Under the hood every Drivn overlay is assembled from the same four parts: a portal so z-index never fights the rest of your layout, a focus trap that engages on open, Escape-key dismissal, and a click-outside handler. None of this comes from a shared wrapper package — it is written inline in each component, so there is no upstream version to track and no lock-step upgrade. Want to soften the backdrop blur or change what Escape does? That edit lives in your repo.

The overlays read their backdrop color, border, and radius from the same CSS custom properties as the rest of your site via the Drivn theming system, so a floating panel matches your buttons and cards without extra styling. Dark mode follows the data-theme attribute automatically — there are no variant props to toggle and no theme context to wire up.

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 →