React dialogs, sheets and menus for Tailwind CSS
Overlays show content above the page: a focused task, a question, a menu or a hint. Dialog is the modal for focused tasks, Alert Dialog asks a short question that must be answered (with an async confirm that can fail inline), and Sheet slides a panel in from any edge for filters, a cart or an inspector. Drawer is the library's bottom sheet on vaul, with drag to dismiss and snap points, and Family Drawer morphs between stacked views. Popover, Hover Card and Tooltip anchor content to a trigger, Dropdown Menu and Context Menu hold actions with icons, shortcuts and submenus, Shortcuts Dialog lists every keyboard shortcut, and Tour walks people through the real UI one step at a time.
All Overlays[12]
TooltipFree
A short inverted label for icon buttons and cut-off values: shortcut hints, toolbar groups that skip the delay, long press on touch.
Dropdown MenuFree
The action menu: icons, descriptions, shortcuts, badges, checkbox and radio items, submenus, and an iOS action sheet on phones.
Alert Dialog
A short modal question that must be answered, with an async confirm that loads, fails inline and shakes, plus an await confirm() API.
Context Menu
The action menu on right-click for grids and lists, and an iOS-style action sheet on a long press on phones and touch screens.
DialogFree
The modal for focused tasks: a spring-scaled card on desktop that becomes a bottom sheet on phones, with nesting and a scrolling body.
DrawerFree
The library's bottom sheet on vaul: drag to dismiss, snap points, nesting, and a side panel or dialog on desktop.
Family DrawerBetaFree
A floating bottom drawer that morphs smoothly between stacked views, inspired by the Family app.
Hover Card
A rich preview of a person, listing or link that floats in on hover or focus, and opens as a bottom sheet with a tap on touch screens.
PopoverFree
Rich floating content anchored to a trigger, like a quick filter, form or share panel, that becomes a bottom sheet on phones.
SheetFree
A panel that slides in from any edge on a spring: filters, a cart, an inspector or the phone navigation menu, swipeable to close on touch.
About Overlays
Most overlays are built on Radix primitives, so focus is trapped and restored, Escape closes them and screen readers hear the right roles. Below 768px they follow phone conventions: dialogs and popovers become bottom sheets, menus become iOS-style action sheets, hover cards open with a tap, and the tour docks at the bottom of the screen. 7 of the 12 overlays are free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key). The other 5 are part of Pro.