Why are overlays in a separate package from primitives?

Overlays use Radix UI's portal and positioning primitives, which add bundle weight. Keeping them in @ninna-ui/overlays means you only pay for them when you actually use them — tree-shaking works at the package level.

Do tooltips handle touch devices?

Yes. Tooltips show on long-press on touch devices and dismiss on tap outside. The positioning engine (Floating UI) handles edge detection and flipping.

Components

React Overlay Components

Modals, drawers, popovers, tooltips, and dropdown menus — all with focus trapping, portal rendering, and Radix accessibility.

import { Modal, Drawer, Popover, Tooltip, DropdownMenu } from "@ninna-ui/overlays";

<Tooltip content="Helpful tip">
  <Button>Hover me</Button>
</Tooltip>

<DropdownMenu>
  <DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Edit</DropdownMenu.Item>
    <DropdownMenu.Item>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

Key features

Modal: focus-trapped dialog with scroll lock

Drawer: slide-in panel from any edge

Popover: anchored floating content

Tooltip: smart positioning with delay control

DropdownMenu: full menu with submenus, separators, labels

All render in portals — no z-index battles

One package for all overlays

All overlay components live in @ninna-ui/overlays — not scattered across packages. This is a common gotcha for developers coming from shadcn/ui, where overlays are mixed into primitives. Import Modal, Drawer, Popover, Tooltip, and DropdownMenu from the same package.

Component Docs

Modal Drawer Popover Tooltip DropdownMenu