KPI primitives
Tremor-Raw-style: KpiCard, Metric, ProgressBar, Tracker, Callout, Divider. CSS-var-themed, dark-mode-flip.
Source:
src/components/ui/
Rendered example — light + dark
Light
Monthly Revenue
$42,800↑12.3%vs. last month
Active Users
3,204↓2.1%vs. last month
Uptime
99.7%→0.1%30-day average
Storage usage
Documents68%
Media34%
Backups91%
Service uptime — last 30 days
96.7%
OperationalDegradedOutage
Callout variants
Information
This is a default callout with neutral styling.
Success
Your changes have been saved successfully.
Warning
Storage is approaching its limit. Consider upgrading your plan.
Error
Failed to connect to the data source. Check your credentials.
or continue with
Dark
Monthly Revenue
$42,800↑12.3%vs. last month
Active Users
3,204↓2.1%vs. last month
Uptime
99.7%→0.1%30-day average
Storage usage
Documents68%
Media34%
Backups91%
Service uptime — last 30 days
96.7%
OperationalDegradedOutage
Callout variants
Information
This is a default callout with neutral styling.
Success
Your changes have been saved successfully.
Warning
Storage is approaching its limit. Consider upgrading your plan.
Error
Failed to connect to the data source. Check your credentials.
or continue with
Recipes & props
A realistic usage snippet for this component. Imports come from
@/components/ui/….
See the
source
for the full API.
import { KpiCard } from '@/components/ui/kpi-card';
import { ProgressBar } from '@/components/ui/progress-bar';
export function Dashboard() {
return (
<div className="grid grid-cols-2 gap-4">
<KpiCard title="Open issues" value="12" delta="-3" />
<ProgressBar value={64} label="Sprint progress" />
</div>
);
}