@plotcn
Source-first React visualization components for Recharts, D3.js, and Google Charts
Install this registry
npx shadcn@latest add https://plotcn.vercel.app/r/registry.json pnpm dlx shadcn@latest add https://plotcn.vercel.app/r/registry.json bunx shadcn@latest add https://plotcn.vercel.app/r/registry.json curl -s https://plotcn.vercel.app/r/registry.json Components
49 totalShared responsive container, ResizeObserver, and CSS token bridge.
npx shadcn@latest add https://plotcn.vercel.app/r/chart-container.json Truthful loading, empty, and error fallback states with glassmorphic styling.
npx shadcn@latest add https://plotcn.vercel.app/r/chart-state.json High-contrast developer tooltip with tabular numbers and semantic token mapping.
npx shadcn@latest add https://plotcn.vercel.app/r/chart-tooltip.json Canonical chart surface, interaction, state, tooltip, and palette tokens.
npx shadcn@latest add https://plotcn.vercel.app/r/chart-tokens.json Series-aware line, area, bar, and point legend treatment.
npx shadcn@latest add https://plotcn.vercel.app/r/chart-legend.json Screen-reader descriptions, live regions, and accessible data disclosure tables.
npx shadcn@latest add https://plotcn.vercel.app/r/chart-accessibility.json Semantic CSS variable token extraction and palette resolution.
npx shadcn@latest add https://plotcn.vercel.app/r/chart-theme.json 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 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 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 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 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 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 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 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-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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 comparing current vs previous periods.
npx shadcn@latest add https://plotcn.vercel.app/r/line-multiple.json Gradient area chart with smooth monotone interpolation.
npx shadcn@latest add https://plotcn.vercel.app/r/area-basic.json Categorical vertical bar chart with rounded caps and responsive tooltips.
npx shadcn@latest add https://plotcn.vercel.app/r/bar-basic.json 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 Physics-based node simulation with link springs and repulsion forces.
npx shadcn@latest add https://plotcn.vercel.app/r/d3-force-network.json Resilient loader with promise deduplication and on-demand package loading.
npx shadcn@latest add https://plotcn.vercel.app/r/google-chart-loader.json Lifecycle wrapper managing ResizeObserver and fallback states for Google Charts.
npx shadcn@latest add https://plotcn.vercel.app/r/google-chart-container.json World, country, and regional statistical choropleths via Google Charts hosted geochart package.
npx shadcn@latest add https://plotcn.vercel.app/r/google-geochart.json Smooth 2D Cartesian line chart rendered with Google Charts corechart package.
npx shadcn@latest add https://plotcn.vercel.app/r/google-line.json Categorical column chart rendered with Google Charts corechart package.
npx shadcn@latest add https://plotcn.vercel.app/r/google-bar.json npx shadcn@latest add https://plotcn.vercel.app/r/chart-motion.json Proportional breakdown with optional legend and pointer tooltips.
npx shadcn@latest add https://plotcn.vercel.app/r/donut-basic.json Local panel isolation, metrics and honest dashboard states.
npx shadcn@latest add https://plotcn.vercel.app/r/block-frame.json Revenue trend, channel comparison and contribution with real period and channel filters.
npx shadcn@latest add https://plotcn.vercel.app/r/revenue-dashboard.json