Layout

KpiCard

A metric card with a title, a value, an optional unit, a trend and an icon.

<script>
  import { KpiCard } from "@codeatlasdev/ui";
  import { DollarSign } from "@lucide/svelte";
</script>

<KpiCard title="Monthly Revenue" value="$48,200" trend={12.4} icon={DollarSign} />

Basic metrics

Monthly Revenue

$48,200

↑+12.4%

Active Users

3,847

↓-2.1%

Conversion

4.8 %

↑+0.6%

Code

<script lang="ts">
  import { KpiCard } from '@codeatlasdev/ui';
  import { Users, DollarSign, TrendingUp } from '@lucide/svelte';
</script>

<div class="kpi-grid">
  <KpiCard title="Monthly Revenue" value="$48,200" trend={12.4} icon={DollarSign} />
  <KpiCard title="Active Users" value="3,847" trend={-2.1} icon={Users} />
  <KpiCard title="Conversion" value="4.8" unit="%" trend={0.6} icon={TrendingUp} />
</div>

<style>
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ca-space-3); width: 100%; }
</style>

Without trend

Omit trend and the indicator disappears.

Orders Today

124

Avg. Session

3m 42s

Error Rate

0.03 %

Code

<script lang="ts">
  import { KpiCard } from '@codeatlasdev/ui';
  import { ShoppingCart } from '@lucide/svelte';
</script>

<div class="kpi-grid">
  <KpiCard title="Orders Today" value="124" icon={ShoppingCart} />
  <KpiCard title="Avg. Session" value="3m 42s" />
  <KpiCard title="Error Rate" value="0.03" unit="%" />
</div>

<style>
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ca-space-3); width: 100%; }
</style>

Negative trend

Churn Rate

5.2 %

↓-1.8%

Response Time

1.4 s

↓-12.3%

Code

<script lang="ts">
  import { KpiCard } from '@codeatlasdev/ui';
  import { Activity } from '@lucide/svelte';
</script>

<div class="kpi-grid">
  <KpiCard title="Churn Rate" value="5.2" unit="%" trend={-1.8} icon={Activity} />
  <KpiCard title="Response Time" value="1.4" unit="s" trend={-12.3} />
</div>

<style>
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ca-space-3); width: 100%; }
</style>

Props

Prop	Type	Default	Description
`title`	`string`	–	Metric name.
`value`	`string \| number`	–	Main value.
`unit`	`string`	–	Unit shown after the value (%, s, users).
`trend`	`number`	–	Percentage change. Positive is green, negative is red, zero is neutral.
`icon`	`IconComponent`	–	Lucide icon. Size and color are managed by the card.
`class`	`string`	`''`	Extra class names.