svelte-swipeout

svelte-swipeout

A powerful and flexible swipeable list component for Svelte 5 applications with iOS-style swipe actions, delete animations, and mobile-optimized touch handling.

Installation

npm install svelte-swipeout

or

pnpm add svelte-swipeout

or

yarn add svelte-swipeout

Features

• 🎯 iOS-style swipe actions - Smooth, native-feeling swipe gestures
• 📱 Mobile-optimized - Touch-friendly with proper scroll handling
• 🎨 Customizable actions - Left and right swipe actions with custom styling
• 💥 Overswipe support - Trigger actions by swiping past threshold
• 🗑️ Delete animations - Multiple delete animation styles (fade, collapse, slide, scale)
• ⚡ Performant - Hardware-accelerated animations using CSS transforms
• 🎭 Svelte 5 ready - Built with Svelte 5 runes and modern features

Usage

Here is a simple example of how to use the svelte-swipeout components:

<script>
  import {
    Swipeout,
    SwipeoutItem,
    SwipeoutContent,
    SwipeoutActionsLeft,
    SwipeoutActionsRight,
    SwipeoutAction,
  } from 'svelte-swipeout';
</script>

<Swipeout>
  <SwipeoutItem>
    <SwipeoutContent>
      <div class="item">Swipe me</div>
    </SwipeoutContent>
    <SwipeoutActionsRight>
      <SwipeoutAction onclick={() => console.log('Delete clicked')}>
        Delete
      </SwipeoutAction>
    </SwipeoutActionsRight>
  </SwipeoutItem>
</Swipeout>

Examples

Simple Swipe

This example shows a simple swipe with left and right actions.

<Swipeout>
  <SwipeoutItem>
    <SwipeoutContent>
      <div class="item">Swipe me</div>
    </SwipeoutContent>
    <SwipeoutActionsLeft>
      <SwipeoutAction on:click={() => console.log('Archive clicked')}>
        Archive
      </SwipeoutAction>
    </SwipeoutActionsLeft>
    <SwipeoutActionsRight>
      <SwipeoutAction onclick={() => console.log('Delete clicked')}>
        Delete
      </SwipeoutAction>
    </SwipeoutActionsRight>
  </SwipeoutItem>
</Swipeout>

Delete with Animation

This example shows how to use the delete functionality with animations. The component supports multiple delete animation styles.

<script>
  let items = $state([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ]);

  function handleDelete(id) {
    items = items.filter(item => item.id !== id);
  }
</script>

<!-- Default fade animation -->
<Swipeout>
  {#each items as item (item.id)}
    <SwipeoutItem delete onDelete={() => handleDelete(item.id)}>
      <SwipeoutContent>
        <div class="item">{item.name}</div>
      </SwipeoutContent>
      <SwipeoutActionsRight>
        <SwipeoutAction
          overSwipe
          class="bg-red-500"
          data-delete="true"
        >
          Delete
        </SwipeoutAction>
      </SwipeoutActionsRight>
    </SwipeoutItem>
  {/each}
</Swipeout>

<!-- With collapse animation -->
<Swipeout class="swipeout-delete-collapse">
  <!-- items here -->
</Swipeout>

<!-- With slide animation -->
<Swipeout class="swipeout-delete-slide">
  <!-- items here -->
</Swipeout>

<!-- With scale animation -->
<Swipeout class="swipeout-delete-scale">
  <!-- items here -->
</Swipeout>

Overswipe Actions

Overswipe actions are triggered when the user swipes past a certain threshold. Perfect for destructive actions like delete.

<Swipeout>
  <SwipeoutItem>
    <SwipeoutContent>
      <div class="item">Swipe me far to trigger overswipe</div>
    </SwipeoutContent>
    <SwipeoutActionsLeft>
      <SwipeoutAction overSwipe class="bg-green-500">
        Reply
      </SwipeoutAction>
    </SwipeoutActionsLeft>
    <SwipeoutActionsRight>
      <SwipeoutAction overSwipe class="bg-red-500">
        Delete
      </SwipeoutAction>
    </SwipeoutActionsRight>
  </SwipeoutItem>
</Swipeout>

Programmatic Control

You can programmatically close swipeouts using the exported functions:

<script>
  import { closeSwipeout, closeAll } from 'svelte-swipeout';

  // Close a specific swipeout element
  function handleClose(element) {
    closeSwipeout(element);
  }

  // Close all open swipeouts
  function handleCloseAll() {
    closeAll();
  }
</script>

Custom Styling

You can customize the colors and styles of the components using CSS variables.

:root {
  --swipeout-delete-button-bg-color: #ff3b30;
  --swipeout-button-text-color: #fff;
  --swipeout-button-padding-vertical: 0;
  --swipeout-button-padding-horizontal: 30px;
  --swipeout-button-font-size: inherit;
  --swipeout-button-font-weight: inherit;
}

You can also use the class prop to add custom classes to the components.

<SwipeoutAction class="my-custom-class">
  Delete
</SwipeoutAction>

API

Swipeout

The root component for the swipeout list.

Prop	Type	Default	Description
class	string	''	Custom class for the component.

SwipeoutItem

A single item in the swipeout list. Handles all swipe interactions and animations.

Prop	Type	Default	Description
class	string	''	Custom class for the component.
delete	boolean	false	Enable delete functionality with animations.
onDelete	function	undefined	Callback function when item is deleted (only used when delete is true).

Events:

• swipeout:open - Fired when swipeout starts opening
• swipeout:opened - Fired when swipeout is fully opened
• swipeout:close - Fired when swipeout starts closing
• swipeout:closed - Fired when swipeout is fully closed
• swipeout:delete - Fired when delete is triggered
• swipeout:deleted - Fired after delete animation completes

SwipeoutContent

The content of the swipeout item.

Prop	Type	Default	Description
class	string	''	Custom class for the component.

SwipeoutActionsLeft

A container for the left swipeout actions.

Prop	Type	Default	Description
class	string	''	Custom class for the component.

SwipeoutActionsRight

A container for the right swipeout actions.

Prop	Type	Default	Description
class	string	''	Custom class for the component.

SwipeoutAction

A single action button in the swipeout actions.

Prop	Type	Default	Description
class	string	''	Custom class for the component.
overSwipe	boolean	false	If true, the action will be triggered when the user swipes past a certain threshold.
onclick	function	() => {}	A function to be called when the action is clicked.
data-delete	string	undefined	Set to "true" to mark this as a delete action (used with SwipeoutItem's delete prop).

Mobile Support

The component is fully optimized for mobile devices with:

• Touch-action CSS - Prevents scroll interference during swipes
• Intelligent scroll detection - Differentiates between vertical scrolling and horizontal swiping
• Proper event handling - Uses pointer events for unified touch/mouse support
• Momentum scrolling - Maintains smooth iOS-style scrolling when not swiping
• One-at-a-time - Only one swipeout can be open at a time for better UX

Delete Animations

The component supports multiple delete animation styles that can be applied by adding a class to the Swipeout container:

• Default - Simple fade out
• swipeout-delete-collapse - Fade out with height collapse
• swipeout-delete-slide - Slide left and collapse
• swipeout-delete-scale - Scale down and collapse

Browser Support

• Modern browsers with ES6+ support
• iOS Safari 12+
• Chrome 80+
• Firefox 75+
• Edge 80+

License

MIT