Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React A simple pie chart
A simple React pie chart for visualizing categorical data proportions using shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Pie charts make proportions obvious at a glance. This React pie chart divides a circle into slices representing browser market share, with each segment's size proportional to its value. Built with shadcn/ui and Recharts, colors from chartConfig automatically apply to each category. The circular form makes it immediately clear which browsers dominate—Chrome's large slice versus Edge's smaller one. Perfect for market share analysis, budget allocation, survey results, or any categorical data where you want to show parts of a whole.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Donut Chart
Pie with center hole for text or emphasis
Pie Chart with Labels
Labels showing values on each slice
Pie Chart with Legend
Legend for category identification
Bar Chart
Alternative for comparing discrete categories
Interactive Pie Chart
Active sector highlighting with center text
Area Chart
Showing trends over time instead
Questions you might have
React A pie chart with no separator
A React pie chart with no separators between slices using stroke='0' for seamless color transitions with shadcn/ui and Recharts
React A pie chart with stacked sections
A React pie chart with stacked concentric rings comparing two related datasets using multiple Pie components with shadcn/ui and Recharts