Components

SwipeActions

SwipeActions adapts SwiftUI's swipe-revealed row actions into an explicit, accessible web row wrapper. On the web, actions are revealed with a toggle instead of relying on touch-only gestures.

Example

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

Default

Loading preview…

Code
'use client';
import { SwipeActions } from '@swiftuijs/ui';
export default function Example() {
    return ((<SwipeActions actions={[
            { label: 'Flag' },
            { label: 'Archive' },
        ]}>
      <div style={{ padding: 16, border: '1px solid var(--sw-color-gray-4, #d1d5db)', borderRadius: 14 }}>
        Project update
      </div>
    </SwipeActions>));
}

Usage and limitations

  • Use edge="leading" to place actions before the row content.
  • Use controlled open state when a surrounding list needs to coordinate which row is expanded.
  • Expanded actions close on Escape or when focus/pointer interaction moves outside the row, matching the temporary nature of swipe-revealed actions.

More examples

Leading
Destructive

API reference

PropTypeRequiredDescription
actionsISwipeActionItem[]Yes—
edge'leading' | 'trailing'No—
openbooleanNo—
defaultOpenbooleanNo—
onOpenChange(open: boolean) => voidNo—

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Stepper

Adjust a number with increment and decrement buttons.

SymbolEffect

SymbolEffect adapts SwiftUI's symbol animation modifiers into an explicit wrapper component for the web.