Foundation·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Children below are rendered into a Portal attached to document.body. Open the element inspector to see them outside this section.

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/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { Portal } from "@sisyphos-ui/react";

export const Floating = () => (
  <Portal>
    <div className="floating">I render at document.body</div>
  </Portal>
);

API

Prop	Type	Default	Description
children*	ReactNode	—	Content rendered into the portal target.
container	Element \| string \| null	document.body	DOM node or CSS selector to render into; defaults to `document.body` when omitted. A selector that matches no element renders nothing.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

SSR-safe: renders null until after mount, so server-rendered markup never contains stray overlay content.
Adds no focus containment by itself — pair it with the useFocusTrap hook (exported alongside), which cycles Tab / Shift+Tab within a ref and restores focus to the previously focused element when released.
The companion useScrollLock hook locks body scroll while an overlay is open.
React events from portal content still bubble through the React component tree, so ancestor keyboard and focus handlers keep working.

Need more?View on npm →