shadcn/ui Expert — Component & Chart Reference

A static, self-contained reference for all shadcn/ui base components and Recharts-based chart types with full code examples.

When to Use This Skill

• User asks for a shadcn/ui component by name (e.g., "add a button", "use a dialog")
• User needs a code example for any base component or chart
• User asks about component variants (e.g., "outline button", "stacked bar chart")
• User needs install commands for shadcn components
• User asks about Recharts charts with shadcn/ui theming

How to Use

1. Read the index to find the component:

   • Components: references/index.md
   • Charts: references/charts-index.md

2. Read the specific component/chart file for code:

   • Components: references/components/{slug}.md
   • Charts: references/charts/{type}.md

3. Follow the variant selection rule (see below)

CRITICAL: Variant Selection Rule

When a component or chart has multiple variants:

1. List the available variants to the user
2. Ask which variant they need before outputting code
3. Output only the selected variant's code

Do NOT dump all variants at once. Components with 1 variant can be output directly.

Common Patterns

Install a component

npx shadcn@latest add {component-slug}

Import pattern

import { ComponentName } from "@/components/ui/{component-slug}"

Chart architecture

All charts use <ChartContainer> with a ChartConfig for theming:

import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"

Install: npx shadcn@latest add chart

Component Categories

Chart Types

Reference Files

• references/index.md — Full component catalog with descriptions
• references/charts-index.md — Chart type catalog with variant lists
• references/components/{slug}.md — One file per component with all variant code
• references/charts/{type}.md — One file per chart type with all variant code