Skip to content

Action Sheet

A copy-paste mobile patterns component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Mobile PatternsHTMLCSSany framework

Copy into your project

HTML
<div class="nuda-asheet" role="dialog" aria-label="Action sheet">
  <div class="nuda-asheet__group">
    <button type="button" class="nuda-asheet__opt">Save Image</button>
    <button type="button" class="nuda-asheet__opt">Copy Link</button>
    <button type="button" class="nuda-asheet__opt nuda-asheet__opt--danger">Delete</button>
  </div>
  <button type="button" class="nuda-asheet__cancel">Cancel</button>
</div>
CSS
/* Action Sheet
   iOS-style stack of options with a separated cancel button.
   Customize: --asheet-bg, --asheet-danger */

.nuda-asheet {
  --asheet-bg: rgba(20, 20, 25, 0.85);
  --asheet-danger: #ef4444;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: system-ui;
  animation: nuda-asheet-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nuda-asheet__group {
  background: var(--asheet-bg);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.nuda-asheet__opt {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  color: #fafafa;
  font: 500 14px/1 system-ui;
  min-height: 46px;
  padding: 0 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s;
}

.nuda-asheet__opt:last-child { border-bottom: 0; }
.nuda-asheet__opt:hover { background: rgba(255, 255, 255, 0.04); }
.nuda-asheet__opt--danger { color: var(--asheet-danger); }

.nuda-asheet__cancel {
  appearance: none;
  width: 100%;
  background: rgba(28, 28, 32, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fafafa;
  font: 600 14px/1 system-ui;
  min-height: 48px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.nuda-asheet__cancel:hover { background: rgba(40, 40, 46, 0.9); }

@keyframes nuda-asheet-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-asheet { animation: none; }
}

How to use Action Sheet

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More mobile patterns components

← Browse all NudaUI components