Stats
KPI and statistics blocks for shadcn/ui. Metric cards with trends, badges, progress bars, sparkline charts, and usage breakdowns. Built for shadcn/ui.
A four-up KPI strip built with shadcn/ui Card components joined by hairline borders into a single rounded panel. Each cell shows a metric label, a large tabular value and a positive or negative percentage delta styled with theme tokens. Ideal as the headline row of an analytics or operations dashboard.
Bordered metric row built with shadcn/ui Card and Badge that compares the current value against the previous period. Each cell highlights the current number, the prior value and a trend badge with a Lucide up or down icon. Useful for weekly or monthly performance summaries.
A responsive grid of four standalone shadcn/ui Card components rendered as a semantic description list. Each card shows a muted label, a large tabular value and an inline percentage change coloured with primary or destructive tokens. Great for product analytics and reliability overviews.
Three shadcn/ui Card components with the metric label and a shadcn/ui Badge trend indicator aligned in the header, followed by a large headline value. Trend badges use a Lucide trending icon and screen-reader text. Suited to engagement and throughput dashboards.
Metric cards built with shadcn/ui Card, CardContent and CardFooter that pair a headline value and percentage change with a footer link to the full report. Positive and negative changes use theme tokens so the block adapts to any palette. Designed for SaaS revenue and growth summaries.
A three-column panel of regional delivery stats with a coloured status dot, a large volume figure and a five-step SLA progress track. Each cell is a full-card link with a Lucide arrow that nudges on hover. Built with shadcn/ui tokens and container queries for infrastructure and operations dashboards.
Plan overview section that lists workspace limits as shadcn/ui Card components, each with a Recharts radial gauge rendered through the shadcn/ui ChartContainer. The heading links to a plan comparison and every card shows used versus allowed counts. Perfect for billing and subscription settings pages.
Four shadcn/ui Card components that visualise per-stream send quotas with a Recharts RadialBarChart inside the shadcn/ui ChartContainer. Each card shows used versus total quota, a percentage in the gauge centre and a CardFooter link to drill into the stream. Suited to usage and capacity monitoring.
Usage overview grid built with shadcn/ui Card and Progress. Each card shows the resource name, the current value, a progress bar against the plan limit and a used-of-limit summary line. A straightforward choice for API quota, storage and billing usage screens.
Three shadcn/ui Card components that summarise delivery volume per channel with a value, absolute change and percentage change above a Recharts area sparkline. Charts render through the shadcn/ui ChartContainer with gradient fills on chart theme colours. Ideal for messaging, traffic or ticker-style overviews.
Dense usage dashboard built with shadcn/ui Card, Button, Dialog, Input and Label. Cards show value versus limit with single or split progress bars, an itemised breakdown, a status or overage warning and a full-width action button; the cost card opens a dialog to update the monthly spending cap. Great for infrastructure billing pages.
Single shadcn/ui Card listing every metered resource for the current billing period with a tiny Recharts donut gauge, the resource name and used-of-limit figures. The header shows the refresh time and a shadcn/ui Button to upgrade. Designed for account usage panels in developer platforms.
Wide shadcn/ui Card that shows total storage used against the plan allowance as a segmented progress bar, with each content type coloured using shadcn/ui chart tokens and listed in a legend alongside the free space. Accessible progressbar roles are included. Suited to storage and retention settings.
Compact spend summary built with shadcn/ui Card and Badge. It shows the month-to-date total with a growth badge, a proportional breakdown bar coloured by chart tokens, a legend listing amount and share per channel and a link to billing settings. Fits sidebars and billing overview pages.
Minimal projection list styled with shadcn/ui theme tokens that shows a forecast value and a growth percentage pill for several horizons, separated by a divider. Lightweight enough for settings panels, pricing calculators or forecast widgets in a shadcn/ui dashboard.