skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn-syntax-chart

Build shadcn Chart visualizations with theme-aware CSS variables and RSC-safe client boundaries.

Updated May 19, 2026
Search Tags:#next.js#dark mode#shadcn#recharts#chart theming#rsc client boundary#chartconfig
One-click install
npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-syntax-chart
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-syntax-chart
Source: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/tree/main/skills/source/shadcn-syntax/shadcn-syntax-chart
Command: npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-syntax-chart

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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, and ChartLegendContent instead 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 ChartContainer has 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.

Frequently Asked Questions about shadcn-syntax-chart

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix Recharts colors not updating in dark mode with shadcn?▼

Recharts charts break in Next.js App Router RSC because chart components require client-side rendering. You must add the `'use client'` directive to any component importing shadcn chart wrappers like ChartContainer to avoid server boundary failures.

Why is my shadcn Recharts chart showing zero height?▼

Your shadcn Recharts chart shows zero height because ChartContainer requires an explicit height contract. Enforcing a specific height constraint on the wrapper guarantees reliable rendering and prevents the chart from collapsing.

Do I need to use shadcn ChartTooltip or can I use raw Recharts tooltips?▼

You need to use shadcn wrapper components like ChartTooltip and ChartTooltipContent instead of raw Recharts tooltips. Mandating wrapper-based Tooltip and Legend ensures correct styling and consistent theme-awareness across your visualizations.

What is the best way to theme a Recharts BarChart or LineChart with shadcn?▼

The best way to theme a Recharts BarChart or LineChart with shadcn is using ChartConfig-driven CSS variables. Map your chart type to the correct Recharts root component and apply CSS-var fills like `var(--color-<dataKey>)` for consistent series colors.

Can I use shadcn chart wrappers for RadarChart and ScatterChart scenarios?▼

Yes, you can use shadcn chart wrappers for RadarChart and ScatterChart scenarios. The wrapper-based approach safely supports Bar, Line, Area, Pie, Radar, Scatter, Composed, and RadialBar charts with deterministic theming and correct styling.

Related Skills

Explore More Software Engineering Skills→
somachaksomachak

building-nextjs-shadcn-interfaces

Scaffold Next.js 15 projects with shadcn/ui and App Router conventions.

Community
Advanced
0xjitsu0xjitsu
1

chart-builder

Generate dark-themed accessible charts with Chart.js or Recharts for React.

Community
Intermediate
zaid-khan-codezaid-khan-code
3

shadcn-ui-setup

Set up Shadcn UI components with dark mode in Next.js.

Community
Intermediate
fefogarciafefogarcia
1

tremor-design-system

Build dashboards and data-rich UIs with Tremor React components and Tailwind CSS.

Community
Intermediate