Portal

Render children into document.body while inheriting :root-scoped theme tokens. The load-bearing dependency behind every overlay.

Group: Utilities · Import path: @orionshub/lucent/portal · Client component — ships a "use client" boundary.

Import

import { Portal } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css' // once, at your app root

Examples

Themed portal content

Themed portal content

Show source

export function PortalBasic() {
  const [open, setOpen] = useState(false)
  return (
    <div style={row}>
      <Button onClick={() => setOpen((v) => !v)}>{open ? 'Close' : 'Open'} portal</Button>
      {open && (
        <Portal>
          <GlassSurface
            style={{ position: 'fixed', right: 24, bottom: 96, padding: 16, borderRadius: 12, maxWidth: 260 }}
          >
            <Text>Rendered into document.body — still themed from :root.</Text>
          </GlassSurface>
        </Portal>
      )}
    </div>
  )
}

Props

Prop	Type	Default	Description
children	React.ReactNode	—	The content to render into the portal.
container	Element | DocumentFragment | null | undefined	—	The DOM node to mount into. Defaults to document.body (Radix default).

Guidance

One-time CSS import

Import the compiled stylesheet once at your app root: import '@orionshub/lucent/styles.css'. Components ship stable class names and read design tokens from CSS custom properties — there is no style runtime. See CSS Import.

Transparency & solid mode

Every glass surface reads --lucent-glass-opacity (0.60–1.0). Dial it at runtime with setGlassOpacity(), or switch to setContrast('solid') for a fully opaque, high-contrast rendering. See Transparency & Solid Mode.

Portal theming

This component renders through a portal to document.body. Because theme tokens are scoped to :root, portalled content stays themed automatically — do not nest it inside a transformed/backdrop-filter ancestor if you portal it manually. See Portal Theming.

RTL

Authored with CSS logical properties — set dir="rtl" on a parent (or the document) and layout mirrors with no JS. Toggle RTL from the glass-controls panel to preview. See RTL Support.

SSR / Next.js

Client component — ships a "use client" boundary. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.