About
A simple grid of vertical bars for comparing a handful of values side by side, with an optional colored "tone" to call out one bar and a dot marker to flag an event — ported to React from the oyna-ui Vue component by azabroflovski.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bar Chart to your project and fits it to your theme.
Code
How Bar Chart is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import BarChart from "@/components/ui/bar-chart";
const week = [
{ label: "Mon", value: 1.42, display: "1.42" },
{ label: "Tue", value: 1.18, display: "1.18" },
{
label: "Wed",
value: 2.31,
display: "2.31",
tone: "danger" as const,
dot: true,
},
{ label: "Thu", value: 1.27, display: "1.27" },
{ label: "Fri", value: 0.96, display: "0.96", tone: "accent" as const },
{ label: "Sat", value: 1.51, display: "1.51", dot: true },
{ label: "Sun", value: 1.33, display: "1.33" },
];
export default function BarChartDemo() {
return (
<div className="flex min-h-[320px] w-full items-center justify-center bg-[#0b0b0f] p-10">
<div className="w-full max-w-xl">
<BarChart items={week} />
</div>
</div>
);
}
More by azabroflovski
View all
Select
Dialog
Switch
Checkbox
Card