Paste from Clipboard Hint
A copy-paste file upload component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
File UploadHTMLCSSany framework
Or paste an image withCtrl+V
Copy into your project
HTML
<div class="nuda-paste" role="note">
<svg class="nuda-paste__icon" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.6" aria-hidden="true">
<rect x="8" y="3" width="8" height="4" rx="1" stroke-linejoin="round" />
<path d="M16 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2"
stroke-linejoin="round" />
</svg>
<span class="nuda-paste__text">Or paste an image with</span>
<kbd class="nuda-paste__kbd">Ctrl</kbd>
<span class="nuda-paste__plus">+</span>
<kbd class="nuda-paste__kbd">V</kbd>
</div>CSS
.nuda-paste {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .75rem;
background: #0c0c10;
border: 1px dashed rgba(255,255,255,.1);
border-radius: 8px;
color: #a0a0a8;
font-size: .78rem;
}
.nuda-paste__icon {
width: 14px;
height: 14px;
color: #62b6ff;
flex-shrink: 0;
}
.nuda-paste__text {
color: #a0a0a8;
}
.nuda-paste__kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 5px;
background: #111114;
border: 1px solid rgba(255,255,255,.1);
border-bottom-width: 2px;
border-radius: 4px;
color: #fafafa;
font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
font-size: .7rem;
font-weight: 500;
line-height: 1;
}
.nuda-paste__plus {
color: #63636e;
font-size: .7rem;
}
How to use Paste from Clipboard Hint
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.