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.