Plain vertical columns comparing magnitudes — value on top, zero-based column, label below — with an accent-highlighted hero column. Answers: "How do these few values stack up side by side?" Part of vizcn by vibecoding.tech — agent-first SVG viz forms, no chart libraries.
import { ColumnChart } from '@/components/ui/value-columns'
// --- vizcn palette (lib/palette.ts inlined for 21st.dev; canonical registry: https://vibecoding.tech/vizcn) ---
const CATEGORICAL = [
'#4E79A7', // blue
'#F28E2B', // orange
'#59A14F', // green
'#B07AA1', // purple
'#76B7B2', // teal
'#E15759', // red
'#EDC948', // yellow
'#FF9DA7', // pink
'#9C755F', // brown
'#BAB0AC', // grey
] as const
function seriesColor(i: number): string {
return CATEGORICAL[((i % CATEGORICAL.length) + CATEGORICAL.length) % CATEGORICAL.length]
}
// --- end palette ---
export default function ValueColumnsDemo() {
return (
<div className="mx-auto w-full max-w-[560px]">
<p className="mb-4 text-[13px] font-semibold text-[var(--vz-ink,#111)]">
Pro plan price · $/month, Jun 2026
</p>
{/* color follows the entity: each vendor's column wears its color */}
<ColumnChart
items={[
{ label: 'Atlas 4', sub: 'Meridian', value: 20, valueLabel: '$20', highlight: true },
{ label: 'Nova Max', sub: 'Helix Labs', value: 30, valueLabel: '$30', color: seriesColor(1) },
{ label: 'Orion Pro', sub: 'Vantage', value: 25, valueLabel: '$25', color: seriesColor(2) },
{ label: 'Vega 2', sub: 'Stellar', value: 15, valueLabel: '$15', color: seriesColor(3) },
{ label: 'Lumen', sub: 'Helix Labs', value: 10, valueLabel: '$10', color: seriesColor(4) },
]}
/>
</div>
)
}
Part of vizcn · by vibecoding.tech — browse the full library on 21st.dev.