Components

Popover

Popover presents lightweight content anchored to another control. It aligns with SwiftUI's popover presentation while keeping web-friendly dialog semantics.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { useRef, useState, type ComponentRef } from 'react';
import { Text } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { Popover } from '@swiftuijs/ui';
function DefaultPopover() {
    const [isPresented, setIsPresented] = useState(false);
    const anchorRef = useRef<ComponentRef<'button'>>(null);
    return (<>
      <button ref={anchorRef} className="sw-button" onClick={() => setIsPresented((value) => !value)} type="button">
        Show Popover
      </button>
      <Popover anchorRef={anchorRef} isPresented={isPresented} onDismiss={() => setIsPresented(false)}>
        <VStack spacing="sm">
          <Text>Quick actions</Text>
          <Text style={{ color: 'var(--sw-color-label-secondary)' }}>
            Popovers stay anchored to the triggering control.
          </Text>
        </VStack>
      </Popover>
    </>);
}
export default function Example() {
    return (<DefaultPopover />);
}

Usage and limitations

  • Use anchorRef to position the popover relative to a trigger.
  • arrowEdge controls which side of the anchor the popover appears on.
  • The popover dismisses on outside click or Escape.
  • It portals to the page body, or to the enclosing modal when its anchor is inside one, to avoid clipping by scrolling content. Scoped theme and material settings follow the originating provider.
  • Narrow screens keep the anchored popover; automatic native-style adaptation to a Sheet is not implemented.

API reference

PropTypeRequiredDescription
isPresentedbooleanYesControls visibility.
titlestringNoAccessible name for the popover.
anchorRefRefObject<HTMLElement | null>YesAnchor element used to position the popover.
onDismiss() => voidNoCalled when the popover should close.
arrowEdge'top' | 'bottom' | 'leading' | 'trailing'NoEdge where the arrow points toward the anchor. Default: 'top'
matchAnchorWidthbooleanNoMatch the anchor width. Default: false
glassboolean | { enabled?: boolean; intensity?: number; variant?: 'regular' | 'clear' }NoLocal material override. Intensity is clamped to 0–1; zero uses an opaque surface. Default: Inherited from UIProvider; off without a provider

Inherits additional props from IBaseComponent, GlassSurfaceProps.

Edit this page on GitHubReport an issue

Picker

Choose one value from a native select control.

PresentationBackground

PresentationBackground adapts SwiftUI's `presentationBackground` modifier into an explicit surface wrapper.