About
A proportional segmented bar that visualizes weighted allocations (like portfolio holdings or budget splits) with a color-coded legend showing each label and its percentage.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Allocation Bar to your project and fits it to your theme.
Code
How Allocation Bar is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { AllocationBar } from "@/components/ui/allocation-bar";
export default function Demo() {
return (
<div className="flex min-h-[260px] w-full items-center justify-center bg-background p-8">
<AllocationBar
className="max-w-md"
segments={[
{ label: "AAPLx", value: 40 },
{ label: "NVDAx", value: 30 },
{ label: "TSLAx", value: 20 },
{ label: "SPACEX-pre", value: 10 },
]}
/>
</div>
);
}
Dependencies
More by viandwi24
View all
Agent Card
Inset Panel
Watchlist Item