Currency Selector
A copy-paste pricing tables component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Pricing TablesHTMLCSSany framework
Copy into your project
HTML
<!-- Currency Selector — hook to a dropdown or modal of currencies -->
<button class="nuda-curr" type="button">
<span class="nuda-curr__flag">$</span>
<span class="nuda-curr__code">USD</span>
<svg class="nuda-curr__chev" viewBox="0 0 12 12" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M3 4.5 L6 7.5 L9 4.5" />
</svg>
</button>CSS
/* Currency Selector
Pill button: gradient flag/symbol + code + chevron.
Customize: --curr-accent, gradient on .nuda-curr__flag */
.nuda-curr {
--curr-accent: #e4ff54;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 10px 7px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: #fafafa;
font: 600 0.875rem ui-sans-serif, system-ui, sans-serif;
cursor: pointer;
transition: border-color 0.25s;
}
.nuda-curr:hover { border-color: rgba(228, 255, 84, 0.3); }
.nuda-curr__flag {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: linear-gradient(135deg, var(--curr-accent), #a8c93a);
color: #09090b;
font: 800 0.75rem ui-sans-serif, system-ui, sans-serif;
border-radius: 4px;
flex-shrink: 0;
}
.nuda-curr__code { font-variant-numeric: tabular-nums; }
.nuda-curr__chev {
width: 12px;
height: 12px;
color: #a1a1aa;
transition: transform 0.25s;
}
.nuda-curr:hover .nuda-curr__chev { transform: rotate(180deg); }How to use Currency Selector
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.