Shadcn.io is not affiliated with official shadcn/ui
Stats Line Chart With Threshold
A line chart stats card for React and Next.js with a horizontal ReferenceLine SLO target, dashed threshold stroke, labeled annotation, and ChartContainer-wrapped Recharts LineChart built with shadcn/ui and Tailwind CSS
Monitor a single metric against its target SLO with this threshold line chart stats card for React and Next.js. Features a ChartContainer-wrapped Recharts LineChart using var(--chart-1), a horizontal ReferenceLine with strokeDasharray rendering the SLO target, a labeled annotation pinned to the reference line, a CartesianGrid with horizontal-only dashed lines, ChartTooltipContent with a line indicator, tabular-nums hero metric, and a semantic status badge indicating whether the latest reading is within target. Built with TypeScript, ChartContainer from shadcn/ui, Recharts LineChart, ReferenceLine, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for SLO tracking, uptime monitoring, latency dashboards, and quality-threshold reporting.
Related Components
React Stats Block Area Chart Hero
Primary area chart card
React Stats Block Area Chart With Annotations
Annotated area chart
React Stats Block Area Chart With Reference Area
Reference area callout
React Stats Block Bar Chart With Target Line
Bar chart with target line
React Stats Block Step Line Chart Card
Step line chart card
React Stats Block Sparkline
Per-metric inline area chart
FAQ
Was this page helpful?
Sign in to leave feedback.
Leaderboard With Trend Spark
A ranked leaderboard stats card for React and Next.js with monospace rank numbers, entity labels, inline h-8 ChartContainer sparklines showing per-row recent trend, and tabular-nums score columns built with shadcn/ui and Tailwind CSS
Live Countdown Stat
A live countdown stats card for React and Next.js with per-segment days/hours/minutes/seconds boxes, tabular-nums digits, a hydration-safe useEffect ticker, and a pulsing live indicator built with shadcn/ui and Tailwind CSS