shadcn-syntax-chart
OfficialBuild shadcn-themed Recharts charts safely.
Software Engineering#next.js#dark mode#shadcn#recharts#chart theming#rsc client boundary#chartconfig
AuthorImpertio-Studio
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Prevents incorrect or non-theme-aware Recharts usage when building charts with the shadcn Chart primitive, which can lead to dark mode color failures, missing CSS variables, and RSC/client boundary errors.
Core Features & Use Cases
- ChartConfig-driven theming: injects
--color-<dataKey>series CSS variables so all chart series follow the active light/dark theme. - Correct wrapper usage: uses
ChartContainer,ChartTooltip,ChartTooltipContent,ChartLegend, andChartLegendContentinstead of raw Recharts tooltip/legend. - RSC-safe client boundaries: enforces adding
'use client'for any component importing chart wrappers to avoid Next.js App Router failures. - Reliable rendering guarantees: ensures
ChartContainerhas an explicit height contract to avoid zero-height charts. - Chart-type composition guidance: maps Bar/Line/Area/Pie/Radar/Scatter/Composed/RadialBar to the correct Recharts root components and required children.
Quick Start
Install the chart component with npx shadcn@latest add chart, then implement a Client Component that wraps your Recharts chart in ChartContainer with a correct ChartConfig and uses ChartTooltipContent and ChartLegendContent.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: shadcn-syntax-chart Download link: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/archive/main.zip#shadcn-syntax-chart Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.