KPI Card Blocks based on shadcn/ui
Performance snapshot dashboard with date picker and four KPI cards (New Customers, Sales Revenue, Completed Tasks, Website Traffic). Each card displays metric values with targets and icon indicators. Perfect for dashboards and analytics interfaces.
Performance Snapshot
Get a quick overview of key performance indicators with these four cards.
150 / 200
New Customers
New customers compared to the target.
$350k / $400k
Sales Revenue
Revenue generated compared to the target.
350 / 400
Completed Tasks
Tasks completed compared to the target.
25k / 30k
Website Traffic
The proportion of visits against the limit.
import KpiCardsWithIcon from "@/components/creative-tim/blocks/kpi-cards-with-icon"
export default function Page() {
return <KpiCardsWithIcon />
}
High-end dashboard KPI row — four metrics in a single hairline-joined grid (no card shadows), oversized numerals, uppercase micro-labels, and colored up/down trend deltas.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROPerformance
Key metrics across the last 30 days.
Revenue
$48,250
Active users
8,912
Conversion
3.6%
Avg. session
4m 32s
export { default } from "../kpi-agency-minimal"
High-end dashboard KPI layout — one large inverted bg-foreground spotlight metric beside a stacked column of three supporting indicators, all joined by a single hairline gap.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PRORevenue overview
Headline metric and supporting indicators.
Total revenue
$482,900
Tracking 14% ahead of the annual target with one month left in the quarter.
New customers
+9.2%1,284
Churn rate
-0.3%1.8%
Avg. deal size
+5.6%$2,410
export { default } from "../kpi-agency-spotlight"
Performance snapshot with view report button and four KPI cards (Revenue, Coupon Sales, Total Audience, Website Traffic). Cards feature colored badges showing percentage changes (green for positive, red for negative). Ideal for financial dashboards and performance monitoring.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROPerformance Snapshot
Get a quick overview of key performance indicators with these four cards.
Revenue
+14%$50,846.90
Coupon Sales
+12%$10,342
Total Audience
-10%19,720
Website Traffic
+1.4%20,000
import KpiCardsWithBadge from "@/components/creative-tim/blocks/kpi-cards-with-badge"
export default function Page() {
return <KpiCardsWithBadge />
}
Overall performance dashboard with date picker and four KPI cards showing Revenue, Coupon Sales, Total Audience, and Website Traffic. Features upward/downward arrow indicators with percentage changes in green (increase) or red (decrease). Perfect for trend analysis and performance tracking.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROOverall Performance
Upward arrow indicating an increase in revenue compared to the previous period.
Revenue
$50,846.90
Coupon Sales
$10,342
Total Audience
19,720
Website Traffic
20,000
import KpiCardsWithArrow from "@/components/creative-tim/blocks/kpi-cards-with-arrow"
export default function Page() {
return <KpiCardsWithArrow />
}
Reports snapshot with view report button and four detailed KPI cards (Sales Revenue, Website Traffic, Coupon Sales, User Engagement). Each card includes an icon, metric value, and 'Get Report' footer link. Excellent for executive dashboards and detailed reporting interfaces.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROReports Snapshot
Upward arrow indicating an increase in revenue compared to the previous period.
import KpiCardsWithCta from "@/components/creative-tim/blocks/kpi-cards-with-cta"
export default function Page() {
return <KpiCardsWithCta />
}
Reports snapshot with four KPI cards showing Sales Revenue, Website Traffic, Coupon Sales, and Audience metrics. Each card includes progress bars with percentage completion against monthly targets and last update timestamps. Perfect for goal tracking and progress monitoring dashboards.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROReports Snapshot
Upward arrow indicating an increase in revenue compared to the previous period.
Sales Revenue
10,484
Last Update: 24.04.2024
Website Traffic
250,000
Last Update: 24.04.2024
Coupon Sales
$10,982.10
Last Update: 24.04.2024
Audience
30,845
Last Update: 24.04.2024
import KpiCardsWithProgressBar from "@/components/creative-tim/blocks/kpi-cards-with-progress-bar"
export default function Page() {
return <KpiCardsWithProgressBar />
}
Advanced reports snapshot with date picker, view report button, and four KPI cards featuring inline charts (Revenue, Outbound Clicks, Total Audience, Avg. Time). Each card displays percentage changes and includes 'See more details' footer links. Ideal for data-rich dashboards and analytics platforms.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROReports Snapshot
Track key metrics with visual trends to understand performance over time.
Revenue
$50,846.90
Outbound Clicks
10,864
Total Audience
19,720
Avg. Time
00:30:14
import KpiCardsWithChartAndCta from "@/components/creative-tim/blocks/kpi-cards-with-chart-and-cta"
export default function Page() {
return <KpiCardsWithChartAndCta />
}
Reports snapshot featuring two campaign cards (Black Friday and Cyber Monday) with date picker and view report button. Each campaign card displays an icon, title, description, and three KPI metrics (Revenue, Outbound Clicks, Total Audience) with colored badges showing changes. Perfect for campaign performance dashboards and marketing analytics.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROReports Snapshot
Upward arrow indicating an increase in revenue compared to the previous period.
Black Friday Campaign
Important metrics from last campaign
$50,846.90
Revenue
10,342
Outbound Clicks
19,720
Total Audience
Cyber Monday Campaign
Important metrics from last campaign
$10,846.00
Revenue
3,874
Outbound Clicks
5,930
Total Audience
import ComplexKpiCards from "@/components/creative-tim/blocks/complex-kpi-cards"
export default function Page() {
return <ComplexKpiCards />
}