Skip to content

Revenue Card with Currency

A copy-paste kpi & dashboard widgets component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

KPI & Dashboard WidgetsHTMLCSSany framework
Total Revenue
USD2,847,500
MRR$237.3K
ARR$2.85M
Growth+23%

Copy into your project

HTML
<div class="nuda-kpi-revenue">
  <div class="nuda-kpi-revenue__top">
    <div>
      <div class="nuda-kpi-revenue__label">Total Revenue</div>
      <div class="nuda-kpi-revenue__val">
        <span class="nuda-kpi-revenue__currency">USD</span>
        2,847,500
      </div>
    </div>
    <svg class="nuda-kpi-revenue__icon" viewBox="0 0 24 24" fill="none">
      <rect width="24" height="24" rx="8" fill="rgba(228,255,84,.1)"></rect>
      <path d="M12 6v12M9 9h4.5a1.5 1.5 0 0 1 0 3H9m0 0h5.25a1.5 1.5 0 0 1 0 3H9" stroke="#e4ff54" stroke-width="1.5" stroke-linecap="round"></path>
    </svg>
  </div>
  <div class="nuda-kpi-revenue__row">
    <div class="nuda-kpi-revenue__seg">
      <span class="nuda-kpi-revenue__seg-label">MRR</span>
      <span class="nuda-kpi-revenue__seg-val">$237.3K</span>
    </div>
    <div class="nuda-kpi-revenue__seg">
      <span class="nuda-kpi-revenue__seg-label">ARR</span>
      <span class="nuda-kpi-revenue__seg-val">$2.85M</span>
    </div>
    <div class="nuda-kpi-revenue__seg">
      <span class="nuda-kpi-revenue__seg-label">Growth</span>
      <span class="nuda-kpi-revenue__seg-val nuda-kpi-revenue__seg-val--up">+23%</span>
    </div>
  </div>
</div>
CSS
.nuda-kpi-revenue {
  background: linear-gradient(135deg,#1a1a1a,#161a00);
  border: 1px solid rgba(228,255,84,.12);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-width: 240px;
}

.nuda-kpi-revenue__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.nuda-kpi-revenue__label {
  color: #777;
  font-size: .73rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .25rem;
}

.nuda-kpi-revenue__val {
  color: #fafafa;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.03em;
  display: flex;
  align-items: baseline;
  gap: .35rem;
}

.nuda-kpi-revenue__currency {
  color: #777;
  font-size: .75rem;
  font-weight: 600;
}

.nuda-kpi-revenue__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.nuda-kpi-revenue__row {
  display: flex;
  gap: .5rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(255,255,255,.07);
}

.nuda-kpi-revenue__seg {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.nuda-kpi-revenue__seg-label {
  color: #555;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.nuda-kpi-revenue__seg-val {
  color: #cfcfcf;
  font-size: .85rem;
  font-weight: 600;
}

.nuda-kpi-revenue__seg-val--up {
  color: #e4ff54;
}

How to use Revenue Card with Currency

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.

More kpi & dashboard widgets components

← Browse all NudaUI components