File List Item
A copy-paste file upload component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
File UploadHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-fli">
<div class="nuda-fli__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"
stroke-linejoin="round" />
<path d="M14 3v6h6" stroke-linejoin="round" />
</svg>
</div>
<div class="nuda-fli__meta">
<p class="nuda-fli__name">presentation-final.pdf</p>
<p class="nuda-fli__size">2.4 MB</p>
</div>
<button class="nuda-fli__remove" type="button" aria-label="Remove file">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
aria-hidden="true">
<path d="M6 6l12 12M18 6l-12 12" stroke-linecap="round" />
</svg>
</button>
</div>CSS
/* File List Item
A row showing one uploaded file: icon + name + size + remove. */
.nuda-fli {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: #0c0c10;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
min-width: 280px;
}
.nuda-fli__icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #111114;
border-radius: 8px;
color: #62b6ff;
flex-shrink: 0;
}
.nuda-fli__icon svg { width: 18px; height: 18px; }
.nuda-fli__meta { flex: 1; min-width: 0; }
.nuda-fli__name {
margin: 0;
font-size: 0.85rem;
color: #fafafa;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
.nuda-fli__size {
margin: 0;
font-size: 0.75rem;
color: #63636e;
}
.nuda-fli__remove {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #a0a0a8;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.nuda-fli__remove:hover {
background: rgba(255, 94, 122, 0.12);
color: #ff5e7a;
}
.nuda-fli__remove svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
.nuda-fli__remove { transition: none; }
}How to use File List Item
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.