File Size Pill
A copy-paste file upload component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
File UploadHTMLCSSany framework
42 KB1.2 MB86 MB
Copy into your project
HTML
<div class="nuda-fsize-row">
<span class="nuda-fsize nuda-fsize--sm">42 KB</span>
<span class="nuda-fsize">1.2 MB</span>
<span class="nuda-fsize nuda-fsize--lg">86 MB</span>
</div>CSS
/* File Size Pill
Compact KB/MB indicator. Color variants signal size buckets:
--sm = small/light, default = medium, --lg = approaching limit. */
.nuda-fsize-row {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.nuda-fsize {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.55rem;
background: #111114;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
color: #a0a0a8;
font-size: 0.72rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.nuda-fsize--sm {
color: #6ee7b7;
border-color: rgba(110, 231, 183, 0.25);
background: rgba(110, 231, 183, 0.06);
}
.nuda-fsize--lg {
color: #ff5e7a;
border-color: rgba(255, 94, 122, 0.25);
background: rgba(255, 94, 122, 0.06);
}How to use File Size Pill
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.