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} />

Put several cards in a KpiGrid so a row never ends on an empty cell.

#175

Basic metrics

Monthly Revenue

$48,200

↑+12.4%

Active Users

3,847

↓-2.1%

Conversion

4.8 %

↑+0.6%

Reference #175 · Pick in the gallery

Code

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

<KpiGrid>
  <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} />
</KpiGrid>

#177

Without trend

Omit trend and the indicator disappears.

Orders Today

124

Avg. Session

3m 42s

Error Rate

0.03 %

Reference #177 · Pick in the gallery

Code

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

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

#176

Negative trend

Churn Rate

5.2 %

↓-1.8%

Response Time

1.4 s

↓-12.3%

Reference #176 · Pick in the gallery

Code

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

<KpiGrid>
  <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} />
</KpiGrid>

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.
`skeleton`	`boolean`	`false`	Loading placeholder with the exact size of the loaded card. See Skeleton.
`class`	`string`	`''`	Extra class names.