Swipe row to archive or delete

Swipe an email left to reveal Archive and Delete; drag it all the way across and it gets deleted.

Settings

Main color#16a34a

Secondary color#e11d48

Size16px

Speed1x

Text

Code

index.html

<div class="uv-msw"><p class="hd"><b>Inbox</b><small>Swipe a row to the left</small></p><ul class="ls" aria-label="Inbox"><li class="rw"><div class="ac"><button type="button" class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4"/></svg><span>Archive</span></button><button type="button" class="dl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg><span>Delete</span></button></div><div class="fg"><span class="av" style="--c:#ec4899">L</span><div><b>Lucía</b><span>October invoice</span></div><time>9:41</time></div></li><li class="rw"><div class="ac"><button type="button" class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4"/></svg><span>Archive</span></button><button type="button" class="dl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg><span>Delete</span></button></div><div class="fg"><span class="av" style="--c:#0ea5e9">M</span><div><b>Marcos</b><span>Trip photos</span></div><time>9:12</time></div></li><li class="rw"><div class="ac"><button type="button" class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4"/></svg><span>Archive</span></button><button type="button" class="dl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg><span>Delete</span></button></div><div class="fg"><span class="av" style="--c:#f59e0b">E</span><div><b>Design team</b><span>Monday review</span></div><time>Yesterday</time></div></li><li class="rw"><div class="ac"><button type="button" class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4"/></svg><span>Archive</span></button><button type="button" class="dl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg><span>Delete</span></button></div><div class="fg"><span class="av" style="--c:#10b981">N</span><div><b>Nora</b><span>Coffee this afternoon?</span></div><time>Yesterday</time></div></li></ul><div class="em"><b>All caught up</b><button type="button" class="rs">Reset</button></div><p class="sr" aria-live="polite"></p></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.