PremiumDonutChart — The donut chart Framer deserves.

Most chart components make you choose between looking good and being easy to use. This one does both. All six slices are configurable from the properties panel — just type a label and a value, and the chart updates live. Hover over any slice to highlight it with a soft glow and see its percentage surface in the center. Click to lock the selection. A native Framer font picker means your typography stays consistent with the rest of your project, and a background color control lets you match any palette without touching a line of code.

Under the hood, it is pure React and SVG — no Chart.js, no D3, no external dependencies that could break between Framer updates. The entry animation uses a cubic easing curve so slices arc in with the kind of weight that feels intentional, not generic. A fine noise texture sits over the background, adding the tactile depth that separates components people notice from ones they forget.

Built for SaaS dashboards, fintech interfaces, pitch decks, marketing landing pages, and any project where data needs to look as considered as the design around it. Drop it in, fill in your numbers, and ship.