sh4dcnv2 · atlas
← libraries

@plotcn

Source-first React visualization components for Recharts, D3.js, and Google Charts

49 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://plotcn.vercel.app/r/registry.json
pnpm pnpm dlx shadcn@latest add https://plotcn.vercel.app/r/registry.json
bun bunx shadcn@latest add https://plotcn.vercel.app/r/registry.json
fetch registry curl -s https://plotcn.vercel.app/r/registry.json

Components

49 total
Chart Container Primitive ui

Shared responsive container, ResizeObserver, and CSS token bridge.

npx shadcn@latest add https://plotcn.vercel.app/r/chart-container.json
Chart State Fallbacks ui

Truthful loading, empty, and error fallback states with glassmorphic styling.

npx shadcn@latest add https://plotcn.vercel.app/r/chart-state.json
Chart Tooltip Primitive ui

High-contrast developer tooltip with tabular numbers and semantic token mapping.

npx shadcn@latest add https://plotcn.vercel.app/r/chart-tooltip.json
Plotcn Chart Tokens style

Canonical chart surface, interaction, state, tooltip, and palette tokens.

npx shadcn@latest add https://plotcn.vercel.app/r/chart-tokens.json
Chart Legend Primitive ui

Series-aware line, area, bar, and point legend treatment.

npx shadcn@latest add https://plotcn.vercel.app/r/chart-legend.json
Accessible Chart Shell ui

Screen-reader descriptions, live regions, and accessible data disclosure tables.

npx shadcn@latest add https://plotcn.vercel.app/r/chart-accessibility.json
Chart Theme Adapter ui

Semantic CSS variable token extraction and palette resolution.

npx shadcn@latest add https://plotcn.vercel.app/r/chart-theme.json
Signal Line component

Focused single-series time-series or ordered categorical line visualization with restrained active-point emphasis.

npx shadcn@latest add https://plotcn.vercel.app/r/line-signal.json
Pulse Line component

High-frequency operational trend visualization for rapidly changing metrics, rolling windows, and live telemetry surfaces.

npx shadcn@latest add https://plotcn.vercel.app/r/line-pulse.json
Twinline Compare component

Comparative time-series line visualization contrasting a primary series against a reference series with synchronized inspection and truthful delta context.

npx shadcn@latest add https://plotcn.vercel.app/r/line-twin-compare.json
Range Line component

Visualizes a central trend alongside a lower-to-upper interval envelope for forecasts, confidence intervals, and operational tolerance bands.

npx shadcn@latest add https://plotcn.vercel.app/r/line-range.json
Step Signal component

Stepped visualization for discrete changes that remain in effect until the next observation, communicating quotas, pricing plans, and configuration states.

npx shadcn@latest add https://plotcn.vercel.app/r/line-step-signal.json
Milestone Line component

Time-series trend with sparse event annotations and milestone pins for releases, incidents, launches, and policy changes.

npx shadcn@latest add https://plotcn.vercel.app/r/line-milestones.json
Threshold Line component

Quantitative time-series trend evaluated against horizontal reference boundaries and bounded operating regions.

npx shadcn@latest add https://plotcn.vercel.app/r/line-threshold.json
Focus Line component

An interaction-first time-series line optimized for precise keyboard focus, pointer/touch scrubbing, crosshair inspection, and persistent locked tooltips.

npx shadcn@latest add https://plotcn.vercel.app/r/line-focus.json
Multi-Signal Line component

Multi-series time-series visualization with deterministic series identity, shared nearest-X inspection, and responsive interactive legend controls.

npx shadcn@latest add https://plotcn.vercel.app/r/line-multi-signal.json
Forecast Line component

Observed-versus-forecast time-series visualization with explicit prediction semantics, non-color line encoding, and optional uncertainty treatment.

npx shadcn@latest add https://plotcn.vercel.app/r/line-forecast.json
Prism Area component

Single-series magnitude area chart with restrained semantic fill, explicit baseline semantics, and Plotcn shared inspection.

npx shadcn@latest add https://plotcn.vercel.app/r/area-prism.json
Stack Flow Area component

Additive multi-series stacked area chart with deterministic stack identity, truthful missing-value semantics, and contribution inspection.

npx shadcn@latest add https://plotcn.vercel.app/r/area-stack-flow.json
Percent Stream Area component

100% normalized stacked area chart for tracking how each contributor's share of the visible whole evolves over an ordered domain.

npx shadcn@latest add https://plotcn.vercel.app/r/area-percent-stream.json
Range Area component

Bounded area visualization for showing a lower/upper envelope across an ordered domain, with optional central trend, truthful interval semantics, and explicit …

npx shadcn@latest add https://plotcn.vercel.app/r/area-range.json
Comparison Area component

Two-series area visualization for comparing a primary magnitude against a reference magnitude across an ordered domain, using restrained overlap, deterministic…

npx shadcn@latest add https://plotcn.vercel.app/r/area-comparison.json
Gradient Depth Area component

Single-series area visualization with a semantic fade-to-surface fill that adds restrained depth without encoding an additional variable.

npx shadcn@latest add https://plotcn.vercel.app/r/area-gradient-depth.json
Baseline Area component

Single-series area visualization showing values above and below an explicit quantitative reference baseline with truthful deviation semantics.

npx shadcn@latest add https://plotcn.vercel.app/r/area-baseline.json
Interactive Area component

Inspection-first area visualization with nearest-X selection, observation-aligned crosshair, keyboard navigation, and a persistent lockable tooltip.

npx shadcn@latest add https://plotcn.vercel.app/r/area-interactive.json
Signal Bars component

Canonical zero-anchored bars for discrete categorical comparison with stable ordering, grouped series, and category-centric inspection.

npx shadcn@latest add https://plotcn.vercel.app/r/bar-signal.json
Group Compare Bars component

Side-by-side peer measures within stable categorical groups, with shared quantitative scaling, deterministic series identity, and category-centric inspection.

npx shadcn@latest add https://plotcn.vercel.app/r/bar-group-compare.json
Stack Ledger Bars component

Additive stacked bars for multi-series categorical composition with stable contributor identity, truthful totals, and category-centric inspection.

npx shadcn@latest add https://plotcn.vercel.app/r/bar-stack-ledger.json
Percent Stack Bars component

100% normalized stacked bars for comparing categorical composition while preserving raw contributor values, truthful zero/missing semantics, and stable stack i…

npx shadcn@latest add https://plotcn.vercel.app/r/bar-percent-stack.json
Diverging Bars component

Signed categorical comparison around an explicit neutral reference, with truthful deviation geometry, symmetric scaling, touch-safe inspection, and neutral abo…

npx shadcn@latest add https://plotcn.vercel.app/r/bar-diverging.json
Bullet Bars component

Compact actual-versus-target bars for operational scorecards, with per-category target markers, truthful delta semantics, and responsive row-based inspection.

npx shadcn@latest add https://plotcn.vercel.app/r/bar-bullet.json
Variance Bars component

Actual-versus-plan delta bars centered on a truthful zero-variance baseline, with neutral signed semantics and auditable source values.

npx shadcn@latest add https://plotcn.vercel.app/r/bar-variance.json
Interval Bars component

Floating range bars with explicit start and end bounds along a shared quantitative or temporal domain, truthful zero-width markers, and container-clamped toolt…

npx shadcn@latest add https://plotcn.vercel.app/r/bar-interval.json
Interactive Bars component

Category-first bar inspection with a responsive band cursor, persistent touch locking, single-tab keyboard navigation, and controlled multi-series tooltip read…

npx shadcn@latest add https://plotcn.vercel.app/r/bar-interactive.json
Basic Line Chart component

Approachable Cartesian line chart built with Recharts and theme tokens.

npx shadcn@latest add https://plotcn.vercel.app/r/line-basic.json
Multi-Series Line Chart component

Multi-series line chart comparing current vs previous periods.

npx shadcn@latest add https://plotcn.vercel.app/r/line-multiple.json
Basic Area Chart component

Gradient area chart with smooth monotone interpolation.

npx shadcn@latest add https://plotcn.vercel.app/r/area-basic.json
Basic Bar Chart component

Categorical vertical bar chart with rounded caps and responsive tooltips.

npx shadcn@latest add https://plotcn.vercel.app/r/bar-basic.json
D3 Animated Line component

Continuous scales, monotone curves, and data points computed with D3 and rendered via React SVG.

npx shadcn@latest add https://plotcn.vercel.app/r/d3-animated-line.json
D3 Force-Directed Network component

Physics-based node simulation with link springs and repulsion forces.

npx shadcn@latest add https://plotcn.vercel.app/r/d3-force-network.json
Google Charts Singleton Loader ui

Resilient loader with promise deduplication and on-demand package loading.

npx shadcn@latest add https://plotcn.vercel.app/r/google-chart-loader.json
Google Chart Container ui

Lifecycle wrapper managing ResizeObserver and fallback states for Google Charts.

npx shadcn@latest add https://plotcn.vercel.app/r/google-chart-container.json
Google GeoChart Choropleth component

World, country, and regional statistical choropleths via Google Charts hosted geochart package.

npx shadcn@latest add https://plotcn.vercel.app/r/google-geochart.json
Google Line Chart component

Smooth 2D Cartesian line chart rendered with Google Charts corechart package.

npx shadcn@latest add https://plotcn.vercel.app/r/google-line.json
Google Bar Chart component

Categorical column chart rendered with Google Charts corechart package.

npx shadcn@latest add https://plotcn.vercel.app/r/google-bar.json
Reduced motion preference hook
npx shadcn@latest add https://plotcn.vercel.app/r/chart-motion.json
Basic Donut Chart component

Proportional breakdown with optional legend and pointer tooltips.

npx shadcn@latest add https://plotcn.vercel.app/r/donut-basic.json
Dashboard frame component

Local panel isolation, metrics and honest dashboard states.

npx shadcn@latest add https://plotcn.vercel.app/r/block-frame.json
Revenue Dashboard block

Revenue trend, channel comparison and contribution with real period and channel filters.

npx shadcn@latest add https://plotcn.vercel.app/r/revenue-dashboard.json