Trunk CChitragupt / /
Review 3
AK
Emerald
Refund due
₹8,200
After TDS
Rose
Tax payable
₹1,62,500
New regime
Blue
TDS paid
₹1,48,200
From 26AS
Amber
Balance due
₹14,300
Pay before 31 Jul
Zinc
Gross income
₹18,40,000
Form 16
Data
K
ViewEdit
Get code · KpiTileData · Website
Your product looks likeNext.js · Tailwind
Framework
HTMLReactVueAngularSvelteWeb Component
Styling
CSSCSS ModulesTailwindInline styles
Options
TypeScriptTokensPlain valuesThis state and sizeAll states and sizes
Ask AI
1 AI action · 57 left this month
trunk code KpiTile --framework react --styling css-modules --tsCopy
KpiTile.tsxCopy
import styles from "./KpiTile.module.css";

export interface KpiTileProps {
  label: string;
  value: string;
  sub?: string;
  tone?: "emerald" | "rose" | "blue" | "amber" | "zinc";
}

export function KpiTile({ label, value, sub, tone = "zinc" }: KpiTileProps) {
  return (
    <div className={styles.root}>
      <p className={styles.label}>{label}</p>
      <p className={`${styles.value} ${styles[tone]}`}>{value}</p>
      {sub && <p className={styles.sub}>{sub}</p>}
    </div>
  );
}
KpiTile.module.cssCopy
.root { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.label { margin: 0 0 4px; font-size: 12px; color: var(--ink-3); }
.value { margin: 0; font: 600 28px/34px Geist, sans-serif; }
.rose { color: var(--danger); } .blue { color: var(--info); } .amber { color: var(--warn); } .emerald { color: var(--success); }
.sub { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-4); }
tokens.cssCopy
:root { --surface: #ffffff; --line: #d1d5db; --ink-3: #6b7280; --ink-4: #9ca3af; --success: #059669; --danger: #e11d48; --info: #2563eb; --warn: #d97706; --radius-lg: 16px; --space-4: 16px; }
UsesCard
3 files · mainDownload all