Popover
Positioned floating panel for menus, forms, and custom UI. `role="dialog"` with focus management.
Preview
Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.
Installation
Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.
$ pnpm add @sisyphos-ui/reactThen import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";
Usage
import { Popover, Button } from "@sisyphos-ui/react";
export const Help = () => (
<Popover content={<div>Popovers carry rich interactive content.</div>}>
<Button variant="outlined">Help</Button>
</Popover>
);Hover trigger
`trigger="hover"` shows the popover on hover/focus like a richer tooltip.
Manual trigger
`trigger="manual"` hands full open/close control to the parent — ideal for form flows and shortcuts.
Placements
Auto-flipping placement reroutes the popover when it doesn't fit.
API
Props table is being written. See the package README for the complete API surface.
The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.