Feature 222 - Donut breakdown with insight cardsPro
A large spend-breakdown donut chart centred between two columns of insight cards that each call out one segment with a short recommendation.
About Feature 222
A large spend-breakdown donut chart centred between two columns of insight cards that each call out one segment with a short recommendation.
Feature 222 is a pro feature block for React, built on shadcn/ui and Tailwind CSS. It ships as 91 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- analytics
- donut chart
- breakdown
- insights
- cost
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/feature-222Dependencies installed automatically: lucide-react.
Uses: donut-chart, reveal, utils.
Usage
import Feature222 from "@/components/blocks/feature-222"
export default function Page() {
return <Feature222 />
}