React dialog, drawer and popover components
Free React overlay components: dialog, alert dialog, drawer, sheet, popover, dropdown menu, context menu and hover card with focus trapping and escape handling.
14 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Overlays are where accessibility usually breaks, so these are built on Base UI primitives: focus moves in and returns on close, escape and outside clicks work, and background content is inert.
They share one elevation and motion language, so a dropdown, a dialog and a sheet feel like parts of the same product rather than three separate libraries.
Components 14
Alert DialoguiShadcn style alert dialog on Base UI for confirmations that need an explicit answer. Modal backdrop, focus trap, title, description and an actions row.npx shadcn@latest add ui.minidev.pro/r/alert-dialog.jsonCommand DialoguiCommand dialog that opens the command palette in a modal from a list of commands with labels and handlers. Wire it to a Cmd K shortcut in your React app.npx shadcn@latest add ui.minidev.pro/r/command-dialog.jsonConfirm DestructiveuiDestructive action confirm: a red trigger button opens a dialog with a title, warning text, Cancel and Confirm. Labels are configurable for deletes and resets.npx shadcn@latest add ui.minidev.pro/r/confirm-destructive.jsonContext MenuuiRight click context menu that opens at the cursor with menu items, including destructive items in red. Closes on selection or click outside, in React.npx shadcn@latest add ui.minidev.pro/r/context-menu.jsonDialoguiShadcn compatible modal dialog on Base UI with a blurred backdrop, enter and exit animation, close button, header, title, description and a footer bar.npx shadcn@latest add ui.minidev.pro/r/dialog.jsonDraweruiBottom drawer that slides a sheet up from the screen edge with a titled header, close button and scrolling body, capped at 80% of the viewport height.npx shadcn@latest add ui.minidev.pro/r/drawer.jsonDropdown MenuuiShadcn compatible dropdown menu on Base UI with groups, labels, checkbox and radio items, submenus, shortcuts, separators and destructive items.npx shadcn@latest add ui.minidev.pro/r/dropdown-menu.jsonHover CarduiA card that appears below a trigger on mouse hover to preview extra detail such as a user profile or link summary. A light take on the shadcn hover card.npx shadcn@latest add ui.minidev.pro/r/hover-card.jsonMobile Action SheetuiAn iOS style action sheet that rises from the bottom with a list of actions, destructive items in red, a Cancel button and a backdrop that dismisses on tap.npx shadcn@latest add ui.minidev.pro/r/mobile-action-sheet.jsonNotification InboxuiA bell with an unread count that opens a notification popover: All and Mentions tabs, unread dots, mark all read, type icons and an empty state. Built in React.npx shadcn@latest add ui.minidev.pro/r/notification-inbox.jsonPeek PaneluiA right side detail panel with a titled header, a close button and a scrollable body for previewing a record without leaving the list. Tailwind styled.npx shadcn@latest add ui.minidev.pro/r/peek-panel.jsonPopoveruiA floating React panel anchored to a trigger, built on Base UI with side and align options, collision aware positioning, title and description parts.npx shadcn@latest add ui.minidev.pro/r/popover.jsonSheetuiSlide-out sheet from the left, right, top or bottom with a backdrop, a titled header, a close button and a scrollable body, rendered as a modal dialog in React.npx shadcn@latest add ui.minidev.pro/r/sheet.jsonTooltipuiReact tooltip on Base UI with a provider for delay, a trigger, and content that positions on any side with an arrow and portal. Drop-in shadcn Tooltip API.npx shadcn@latest add ui.minidev.pro/r/tooltip.json
Frequently asked questions
What is the difference between a dialog and an alert dialog?
An alert dialog is for confirmations the user must answer, so it cannot be dismissed by clicking outside. A regular dialog can be dismissed freely.
Do overlays work inside other overlays?
Yes. Menus inside dialogs and nested popovers stack correctly and close in the right order.
How do I make a bottom sheet on mobile?
Use the drawer or sheet component with the bottom side. It keeps the same focus handling as the dialog.