Blocks
Metrics Comparison Block
Tabbed chart block combining StatCard, LineChart, and PieChart for switching between metric views.
Revenue
$84k
+11%month over month
Costs
$29k
-4%month over month
Conversion
6.8%
+0.9%vs prior period
Bounce
18%
stablevs prior period
Metrics comparison
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/metrics-comparison.jsonProps
PropTypeDefaultDescription
lineLabelsstring[]—
Labels for the line chart axis.
lineSeriesLineSeries[]—
Series data for the line chart.
pieDataPieSlice[]—
Slice data for the pie chart.
statsDashboardStat[]—
Stat card data for the block.
tab1Labelstring—
First tab label.
tab2Labelstring—
Second tab label.
titlestring—
Block heading text.
Accessibility
This block is composed from accessible byDefaultHuman components. Preserve visible labels, button text, and supporting copy when adapting it so the layout remains understandable without the visual styling.
Examples
import { MetricsComparisonBlock } from "@/components/block/MetricsComparisonBlock";
<MetricsComparisonBlock />;