Components

ContextMenu

ContextMenu presents a menu of actions from a context interaction. On the web this maps to the native right-click gesture while preserving SwiftUI's contextual action model.

Example

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

Default

Loading preview…

Code
'use client';
import { Card } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
import { ContextMenu } from '@swiftuijs/ui';
export default function Example() {
    return ((<ContextMenu items={[
            { label: 'Rename' },
            { label: 'Duplicate' },
            { label: 'Delete', style: 'destructive' },
        ]}>
      <Card>
        <Text>Right click this card</Text>
      </Card>
    </ContextMenu>));
}

Usage and limitations

  • Right click the wrapped content to open the menu.
  • The first enabled action receives focus when the menu opens.
  • Use ↑/↓ and Home/End to move between actions.
  • Items dismiss the menu after selection.
  • The menu closes on outside click or Escape, then restores focus to the trigger.

API reference

PropTypeRequiredDescription
itemsIContextMenuItem[]YesMenu items.
childrenReactElementYesTrigger content that receives the context-menu interaction.
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

ContentUnavailableView

ContentUnavailableView presents polished empty states for missing data, search misses, and first-run experiences.

ControlGroup

ControlGroup clusters related actions under a shared label. The component keeps SwiftUI's grouped-control mental model while using standard web grouping semantics.