Stats Blocks based on shadcn/ui
A stats row is the fastest way to show someone the numbers that matter, revenue, users, growth, uptime, before they scroll. These shadcn/ui stats blocks give you those KPI cards ready to drop in: the big number, the label, the up or down trend, and an icon, lined up in a grid that holds together on mobile.
They are built with shadcn/ui and Tailwind, with light and dark variations, so they sit naturally at the top of a dashboard or a landing page. Copy the code or run one npx shadcn add command, then feed in your real metrics and the trend arrows. Four cards or eight, the grid stays even.
Pick a stats layout below that fits, a simple metric row, KPI cards with trends, a dashboard overview strip, and start from a version that already reads clearly.
Usage dashboard showcasing API, storage, seats, and build minutes consumption with progress bars, status badges, and plan controls. Includes add-on management and overage protection toggles.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROUsage Limits Dashboard
Monitor plan usage and upgrade before you hit limits.
API requests
820k of 1M
Resets in 12 days
File storage
72 GB of 100 GB
Renews monthly
Team seats
18 of 20
Based on active members
Build minutes
2,900 of 3,000
Resets on Mar 1, 2026
Plan summary
Pause traffic when limits are hit.
Move to the next plan when needed.
Active add-ons
Expand limits with targeted upgrades.
Extra build minutes
+5,000 / month
Dedicated IP
US East region
SAML SSO
Enterprise security
import UsageLimitsDashboard from "@/components/creative-tim/blocks/usage-limits-dashboard"
export default function Page() {
return <UsageLimitsDashboard />
}
Statistics section with company logos. Features 4-column grid of cards displaying brand logos, metrics counts, and achievement titles for showcasing growth and engagement.
Trusted by Industry Leaders Worldwide
Join thousands of successful businesses leveraging our platform to drive growth, engagement, and innovation. Our numbers speak for themselves—see the impact we're making across industries.
9,340+
Hours of Streaming Content
4,230+
Active User Sessions
3,200+
Creative Boards Created
40%
Average Growth Rate
import CardStats from "@/components/creative-tim/blocks/card-stats"
export default function CardStatsPage() {
return <CardStats />
}
Clean 3-column stats grid with centered cards. Each stat displays large count, title heading, and descriptive text for key performance indicators.
1,200+
Projects
Of 'high-performing' level are led by a certified manager
500+
Sections
That meets quality standards required by our users
24/7
Support
Actively engage team members that finishes on time
import SimpleStatsBlock from "@/components/creative-tim/blocks/simple-stats-block"
export default function SimpleStatsBlockPage() {
return <SimpleStatsBlock />
}
Stats section with centered header and 4-column grid. Features section title, description, and cards with large counts and metric labels.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROOur Activity
Your life will be much easier
We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play
1,200+
Projects
1,000+
Components
500+
Sections
24/7
Support
import SimpleStatsBlockWithTitles from "@/components/creative-tim/blocks/simple-stats-block-with-titles"
export default function SimpleStatsBlockWithTitlesPage() {
return <SimpleStatsBlockWithTitles />
}
Stats section with icons and heading. Features 4-column grid with icon indicators, large metric counts, and category labels for showcasing key numbers.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROTurn your idea into a startup
We' constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play
1,200+
Projects
1,000+
Components
500+
Sections
24/7
Support
import StatsWithIcons from "@/components/creative-tim/blocks/stats-with-icons"
export default function StatsWithIconsPage() {
return <StatsWithIcons />
}
Comprehensive stats grid with header section. Features centered title, tagline, and 4 cards with counts, headings, and descriptive text.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROOur Activity
Building the future
Learn more about Material Tailwind.
1,200+
Projects
Of 'high-performing' level are led by a certified manager
1,000+
Components
That meets quality standards required by our users
500+
Sections
That meets quality standards required by our users
24/7
Support
Actively engage team members that finishes on time
import StatsBlockWithDescription1 from "@/components/creative-tim/blocks/stats-block-with-description-1"
export default function StatsBlockWithDescription1Page() {
return <StatsBlockWithDescription1 />
}
Impact stats section with header and CTA. Features headline, description, action button, and cards with icons displaying dual metrics and achievements.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROImpacts
Trusted by over 5,000 businesses to improve their digital growth with us.
Your commitment to health is inspiring and your stats show it. Your contributions have made a significant impact in your community.
35%
YoY growth in active users
45%
Increase in project completion rate
85%
Decrease in churn rate
150%
Growth in user engagement
70%
Reduction in development time
$12M
Raised in latest funding round
import StatsBlockWithDescription2 from "@/components/creative-tim/blocks/stats-block-with-description-2"
export default function StatsBlockWithDescription2Page() {
return <StatsBlockWithDescription2 />
}
Two-column layout with left content and right stats grid. Features section tagline, heading, description, and 2x2 cards grid with counts and labels.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROOur Stats
Your life will be much easier
The moment you know youve never felt anything like it. With a single use, this powerfull UI Kit lets you do more than ever before.
1,200+
Projects
1,000+
Components
500+
Sections
24/7
Support
import StatsBlockWithLeftCenteredHeadline from "@/components/creative-tim/blocks/stats-block-with-left-centered-headline"
export default function StatsBlockWithLeftCenteredHeadlinePage() {
return <StatsBlockWithLeftCenteredHeadline />
}
Advanced stats layout with large featured card and grid. Left side showcases highlighted achievement, right side displays 2x2 grid of detailed statistics.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROTurn your idea into a startup
We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play
1,000Kg
CO2 Emissions Offset
Eco Warrior Achievement
Congratulations on reaching a new milestone in environmental stewardship!
15,000M
Marathon Runner Progress
You're racing ahead in your marathon training goals.
$10,000+
Invested
Your financial acumen is paying off—literally.
4,500+
Hours of Exercise
Your commitment to health is inspiring and your stats show it.
8,200+
Volunteer Hours
Your contributions have made an impact in your community.
import DefaultStatsBlock from "@/components/creative-tim/blocks/default-stats-block"
export default function DefaultStatsBlockPage() {
return <DefaultStatsBlock />
}
Dynamic stats carousel with dark overlay background. Features Swiper slider with navigation arrows, pagination dots, and centered stats with counts, titles, descriptions, and CTA.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROimport DarkStatsBlock1 from "@/components/creative-tim/blocks/dark-stats-block-1"
export default function DarkStatsBlock1Page() {
return <DarkStatsBlock1 />
}
Full-screen dark theme stats section. Features black background, centered header with tagline, headline, description, and 4-column grid of large stats with secondary color text.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROOur Activity
Your life will be much easier
We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play
1,200+
Projects
1,000+
Components
500+
Sections
24/7
Support
import DarkStatsBlock2 from "@/components/creative-tim/blocks/dark-stats-block-2"
export default function DarkStatsBlock2Page() {
return <DarkStatsBlock2 />
}
Frequently asked questions
Are these stats blocks free?
Yes, the free ones are copy-paste with no account and fine for commercial projects. A few dashboard-grade layouts are PRO and marked.
Can I show trends and percentages?
Yes. The trend indicator (up or down with a percentage) is part of the card, so you set the value and direction from your data and it renders the arrow and color.
Do they support dark mode?
Many include light and dark variations out of the box, built on shadcn/ui theming, so they follow your app's theme without extra styling.
How do I connect my own numbers?
Once the block is in your project, replace the example values with your data, whether that is from an API, a database query, or props. The card handles the display.
Do they work with Next.js?
Yes, they are React components for Next.js and Tailwind, and they work in any React setup with shadcn/ui installed.