Components
- Activity Heatmap
- Activity Rings
- Bar Chart
- Bar List
- Command Palette
- Composed Chart
- Corner Frame
- Data Table
- Delta Badge
- Distribution Bar
- Donut Chart
- Dot Plot
- Funnel Chart
- Heatmap Chart
- KPI Card
- Metric List
- Metric Value
- Period Tabs
- Radar Chart
- Radial Gauge
- Sankey Chart
- Scatter Chart
- Segmented Meter
- Sparkline
- Tick Bar
- Timeline
- Trend Chart
Blocks
- Activity Rings Card
- Allocation Card
- Balance Chart Card
- Breakdown Card
- Commerce KPI Row
- Contributions Card
- Data Table Card
- Distribution Card
- Dot Plot Card
- Dual Metric Card
- Funnel Chart Card
- Goal Chart Card
- Heatmap Chart Card
- Insight Card
- KPI Row Card
- Metric Tabs Chart Card
- Payment Summary Card
- Period Bar Chart Card
- Progress Card
- Revenue Ring Card
- Ring KPI Card
- Score Gauge Card
- Stage Bars Card
- Status Gauge Card
- Tick KPI Card
A card with a total for the selected period, a range switcher, and a bar chart that highlights that period. Click a bar to select its period.
Spending
$10,420.00
+126.7%Mar spending vs Feb
"use client"
import { PeriodBarChartCard } from "@/registry/dashboardcn/blocks/period-bar-chart-card"A card with a total for the selected period, a range switcher, and a bar chart that highlights that period. Clicking a bar selects it, which makes it a small interactive report.
Installation#
pnpm dlx shadcn@latest add @dashboardcn/period-bar-chart-cardAlso installs card, chart, tabs from shadcn/ui if missing.
Usage#
import { PeriodBarChartCard } from "@/components/period-bar-chart-card"
<PeriodBarChartCard
title="Spending"
data={data}
xKey="week"
yKey="spend"
groupKey="month"
valueLabel="spending"
color="var(--color-orange-500)"
ranges={[
{ value: "1y", label: "1Y", points: 48 },
{ value: "6m", label: "6M", points: 24 },
{ value: "3m", label: "3M", points: 12 },
]}
defaultRange="6m"
/>Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.