Statistic card Blocks for Shadcn and React
Connected stats grid
import { TrendingDownIcon, TrendingUpIcon } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'
import { cn } from '@/lib/utils'
interface StatisticItem {
name: string
value: string
previousValue?: string
change?: string
positive?: boolean
href?: string
}
interface Props {
statistics?: StatisticItem[]
comparisonLabel?: string
}
const sampleStatistics: StatisticItem[] = [
{
name: 'Revenue',
value: '$403,236',
previousValue: '$313,535',
change: '21%',
positive: true,
href: '#',
},
{
name: 'Customers',
value: '1,034',
previousValue: '1,012',
change: '23%',
positive: true,
href: '#',
},
{
name: 'Orders',
value: '78',
previousValue: '101',
change: '26%',
positive: false,
href: '#',
},
{
name: 'Active Subscriptions',
value: '52',
previousValue: '86',
change: '34%',
positive: false,
},
]
export default function StatisticCardOne({
statistics = sampleStatistics,
}: Props) {
return (
<div className="flex items-center justify-center p-6">
<div className="w-full grid grid-cols-1 rounded-xl sm:grid-cols-2 lg:grid-cols-4">
{statistics.map((stat, index) => (
<Card
key={stat.name}
className={cn(
'relative w-full rounded-none border-none py-0 ring ring-border',
'first:rounded-t-xl first:sm:rounded-t-none first:sm:rounded-tl-xl first:lg:rounded-l-xl',
'last:rounded-b-xl last:sm:rounded-b-none last:sm:rounded-br-xl last:lg:rounded-r-xl',
index === 1 && 'sm:rounded-tr-xl lg:rounded-tr-none',
index === statistics.length - 2 && 'sm:rounded-bl-xl lg:rounded-bl-none',
stat.href && 'hover:bg-accent has-focus-visible:ring-2 has-focus-visible:ring-ring transition',
)}
>
<CardContent className="flex flex-col gap-2 p-4 sm:p-6">
<div className="text-sm font-medium text-muted-foreground">
{stat.name}
{stat.href && (
<a href={stat.href} className="peer after:absolute after:inset-0" aria-hidden="true" />
)}
</div>
<div className="flex items-center gap-2">
<div className="text-3xl font-medium tracking-tight">
{stat.value}
</div>
{stat.change && (
<Badge className={cn(stat.positive ? 'bg-green-100 text-green-800 dark:bg-green-400/10 dark:text-green-400' : 'bg-destructive/10 text-destructive')}>
{stat.positive ? <TrendingUpIcon /> : <TrendingDownIcon />}
{stat.change}
</Badge>
)}
</div>
{stat.previousValue && (
<span className="text-sm text-muted-foreground">
{`vs. ${stat.previousValue} last period`}
</span>
)}
</CardContent>
</Card>
))}
</div>
</div>
)
} Block details
A connected statistics grid displaying key metrics in a seamless horizontal layout. Each card shows a metric name, current value, percentage change with trend indicator (up/down), and comparison to previous period. Cards feature hover states and optional click navigation. Perfect for dashboards and analytics overview sections.
| Dependency | Source |
|---|---|
| Card (shadcn) | Registry |
| Badge (shadcn) | Registry |
| Lucide React | NPM |
Frequently asked questions
Are the statistic card blocks free to use?
Yes. All our statistic card blocks are free to use in personal and commercial projects.
How do I use these statistic card blocks in my project?
Simply browse our collection, click on the "Copy Code" button for your chosen block, and paste it into your Shadcn React project. All components are built with Tailwind CSS and shadcn React, so they'll work seamlessly with your existing setup.
Can I customize the statistic card blocks?
Absolutely! All our statistic card blocks are fully customizable. You can easily modify colors, spacing, typography, and layout by adjusting the Tailwind CSS classes in the component code.