Overlays
5 componentsOverlay components built on Radix UI — modals, drawers, popovers, tooltips, and dropdown menus. Fully accessible with focus management.
@ninna-ui/overlayspnpm add @ninna-ui/overlaysRequires @ninna-ui/core (auto-installed) + CSS setup.
Features
- ✓5 overlay components powered by Radix UI
- ✓Automatic focus trapping and restoration
- ✓Keyboard navigation (Escape to close)
- ✓Scroll lock on body when open
- ✓Accessible ARIA dialog/menu patterns
- ✓Controlled and uncontrolled modes
Components
Modal
Dialog overlay with header, body, footer, and close button. Focus-trapped and dismissible.
Drawer
Slide-in panel from any edge with multiple sizes and placements.
Popover
Floating content panel anchored to a trigger element.
Tooltip
Lightweight hover/focus tooltip with arrow and placement options.
DropdownMenu
Context menu with items, checkboxes, radio groups, and submenus.
Quick Start
import { Modal, Drawer, Popover } from "@ninna-ui/overlays";