About
Cerulean Edge stat card with accent bar, trend indicator, and optional link. Used in dashboards to display key financial metrics with typographic-led design.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Stat Card to your project and fits it to your theme.
Code
How Stat Card is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import StatCard from '@/components/ui/statcard';
export default function StatCardDemo() {
return (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1em', padding: '2em', maxWidth: 960, margin: '0 auto' }}>
<StatCard label="Invoiced (May)" value="$15,400.00" sub="8 invoices" trend="up" href="/invoices" />
<StatCard label="Paid (May)" value="$12,100.00" sub="6 paid" trend="up" />
<StatCard label="Outstanding" value="$3,300.00" sub="2 overdue" trend="down" />
<StatCard label="Expenses (May)" value="$4,200.00" sub="12 expenses" trend="neutral" />
</div>
);
}
More in Cards
View all
Stats cards with links
33
Course Design Cards
1.1K
Card
70
Statistics Card 2
264
Statistics Card 10
263
Card
17
Card Studio
9
The Item one
3
