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 file
src/components/ui/
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>
);
}Props API
ButtonProps | Prop | Type | Default | Description |
|---|---|---|---|
asChild opt | boolean | false | — |
CalloutProps | Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | — |
variant opt | 'default' | 'success' | 'warning' | 'error' | 'default' | — |
icon opt | React.ReactNode | — | Optional icon node (e.g. a Lucide icon element) shown beside the title. |
DataTableProps | Prop | Type | Default | Description |
|---|---|---|---|
columns | ColumnDef<TData, TValue>[] | — | — |
data | TData[] | — | — |
initialColumnVisibility opt | VisibilityState | {} | Initial column visibility — column id to visible boolean. |
initialGlobalFilter opt | string | '' | Initial global filter string. |
height opt | string | number | '500px' | Height of the scroll container in CSS units. Defaults to '500px'. |
estimateRowSize opt | number | 40 | Estimated row height in px for virtualization. Defaults to 40. |
syncToUrl opt | boolean | { key: string } | false | Sync filter/sort/visibility/sizing to URLSearchParams so views are shareable and survive page refresh. Pass `{ key: 'myTable' }` to namespace URL params when multiple DataTables share a page. Defaults to false (no URL syncing). |
DividerProps | Prop | Type | Default | Description |
|---|---|---|---|
children opt | React.ReactNode | — | Optional centered text label rendered between two rules. |
MetricProps | Prop | Type | Default | Description |
|---|---|---|---|
value | string | number | — | — |
label opt | string | — | — |
delta opt | { value: number; /** Semantic trend direction. Controls col… | — | — |
ProgressBarProps | Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Completion percentage, clamped to [0, 100]. |
label opt | string | — | Accessible name for screen readers. |
TrackerProps | Prop | Type | Default | Description |
|---|---|---|---|
data | TrackerBlock[] | — | — |