About
A small gradient legend bar (vertical or horizontal) with min/max labels, used next to a heatmap or PSF/wavefront plot to show what a color scale means.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Colorbar to your project and fits it to your theme.
Code
How Colorbar is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Colorbar from "@/components/ui/colorbar";
export default function ColorbarDemo() {
return (
<div
className="flex items-center justify-center gap-16 p-10 rounded-lg"
style={{ background: "#fffdf9", color: "#1f1d1a" }}
>
<div className="flex flex-col items-center gap-3">
<div className="flex" style={{ height: 160 }}>
<Colorbar map="ember" labels={["1", "0"]} />
</div>
<span className="text-xs" style={{ color: "#5f5a52" }}>
PSF, linear
</span>
</div>
<div className="flex flex-col items-center gap-3">
<div className="flex" style={{ width: 160 }}>
<Colorbar map="wave" labels={["+", "0", "\u2212"]} horizontal />
</div>
<span className="text-xs" style={{ color: "#5f5a52" }}>
Wavefront, signed
</span>
</div>
</div>
);
}
More by eleoptics
View all
Spot Diagram
Plot Card