Skip to content

Popover — how it compares ​

@rozie-ui/popover wraps @floating-ui/dom — the same vanilla-JS positioning engine that powers most of the libraries below. The difference is the same popover, with the same API, in six idiomatic packages: instead of a separate React hook library, a Vue plugin, and hand-rolled Svelte/Solid/Lit ports, every framework gets a first-class pre-compiled package, with no Rozie toolchain required. Styling is just as uniform: every rendered value is a --rozie-popover-* CSS custom property with a built-in fallback (zero-config, fully re-skinnable), plus ready-made theme bridges for shadcn/ui, Material 3, and Bootstrap 5 — where most of the libraries below ship unstyled or leave re-skinning to per-framework CSS.

vs the Floating UI framework packages (@floating-ui/react, Floating Vue, etc.) ​

Floating UI ships first-class bindings for some frameworks and nothing for others:

ReactVueSvelteAngularSolidLit
Official / well-maintained binding@floating-ui/react (full)Floating Vue (community)——solid-floating-ui (thin)—
@rozie-ui/popover✅✅✅✅✅✅

@floating-ui/react is excellent and far deeper than this primitive (focus management, interactions, the full hook toolkit). If you are React-only and need that depth, use it directly. @rozie-ui/popover instead gives the same engine, the same API, on every framework — the value is parity across a multi-framework design system, not out-depthing the React-specific package. Like Floating UI's own bindings, it can position against an element another component owns, or against a virtual element such as a pointer position, through the reference prop.

vs Radix Popover / Headless UI ​

Radix and Headless UI are React-first (Radix has a Vue port; Headless UI covers React + Vue). They bundle a rich accessibility + focus-trap layer that this primitive deliberately keeps minimal (it wires role/aria-haspopup/aria-expanded/aria-controls/aria-describedby + Escape/click-outside dismissal and returns focus on close, and leaves focus-trapping to the consumer). Choose Radix/Headless UI for a batteries-included React/Vue popover; choose @rozie-ui/popover when you need the same headless positioning primitive across React, Vue, Svelte, Angular, Solid, and Lit with a single API.

vs Tippy.js / Floating Vue (tooltips) ​

Tippy.js is a popular standalone tooltip library (its v6 line is built on Popper v2, the predecessor the Floating UI team now recommends migrating away from). Floating Vue is the Vue-specific successor. Both are great for tooltips but are framework-coupled (Tippy ships per-framework wrappers; Floating Vue is Vue-only). @rozie-ui/popover serves both tooltip (trigger="hover"/"focus", role="tooltip") and click-popover modes from one component, everywhere. A click popover is non-modal and role-neutral by default (the slot content owns its ARIA role); opt into modal for role="dialog" + aria-modal="true" (bring your own focus trap — see below).

When NOT to use it ​

  • You need a full focus-trap + dismissable-layer stack on React only → @floating-ui/react or Radix.
  • You need a modal dialog (not a positioned floating element) → use @rozie-ui/dialog.
  • You need a complete menu button (roving focus, Home/End, typeahead, Tab closing the menu) → Popover can host the menu (popupRole="menu" announces it, on the wrapper and via the anchor slot on your own button), but the menu's keyboard model is yours; there is no Rozie Menu component yet.
  • You want a select/combobox listbox → use @rozie-ui/listbox or @rozie-ui/combobox, which own their own keyboard/selection model.

Pre-1.0 — APIs may change between minor versions.