- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
Chart
Recharts-based chart primitives with theme-aware colors, tooltip content, legend content, and Figma-aligned chart token styling.
Figma: DS-shadcn-001 Foundations · Charts 533:8856
Import
Live Demo
Recharts examples using Lumin chart colors, tooltip content, legend content, and Figma reference primitives.
Figma: DS-shadcn-001 Foundations · Charts 533:8856 · Tooltip 523:8354 · Legend 449:7467
Bar chart
Cartesian grid, 8px bar radius, tooltip, and legend.
Line chart
Five-series legend using chart semantic tokens.
Pie chart
Pie slices use the same chart color sequence.
Tooltip reference
2024-07-19
Item 1600kcal
Item 1600kcal
Item 1600kcal
Total600kcal
Legend reference
Item 1
Item 2
Item 3
Item 4
Item 5
Props
| Name | Type | Default | Description |
|---|---|---|---|
| config* | ChartConfig | — | Maps data keys to labels, icons, and chart colors or theme colors |
| indicator | "dot" | "line" | "dashed" | "dot" | Visual indicator style for ChartTooltipContent |
| hideLabel | boolean | false | Hides the tooltip label row |
| hideIcon | boolean | false | Hides configured legend icons in ChartLegendContent |
Examples
Bar Chart
Use ChartContainer with Recharts primitives and chart tokens.
Line Chart
Add ChartLegendContent for Figma-aligned legend swatches.
Pie Chart
Use chart token fills for pie segments.