Koori UI
Components

GlassStatCard

A glassmorphism-styled metric card displaying a label, value, optional trend, and optional icon.

Preview

Total Revenue

$48.2k

+12.5%
Churn Rate

2.1%

-0.4%

Usage

import { GlassStatCard } from "koori-ui";
 
<GlassStatCard label="Total Revenue" value="$48,295" />

With Trend

<GlassStatCard label="Monthly Users" value="12,400" trend={8.3} />
<GlassStatCard label="Churn Rate" value="2.1%" trend={-1.4} />

With Icon

import { Users } from "lucide-react";
import { GlassStatCard } from "koori-ui";
 
<GlassStatCard
  label="Active Users"
  value="3,842"
  trend={5.2}
  icon={<Users className="h-5 w-5" />}
/>

Variants

<GlassStatCard label="Revenue" value="$12k" variant="default" />
<GlassStatCard label="Revenue" value="$12k" variant="subtle" />
<GlassStatCard label="Revenue" value="$12k" variant="elevated" />

Props

PropTypeDefaultDescription
labelstring—Metric label (required)
valuestring | number—Metric value (required)
trendnumber—Percentage change; positive = up, negative = down
iconReactNode—Icon displayed in the top-right corner
variant"default" | "subtle" | "elevated""default"Glass intensity level
classNamestring—Additional CSS classes

All native <div> props are also accepted.

Previous

GlassTable

Next

GlassAvatar

On this page