Value Columns

Component 10

About

Want this built into your product? AI agents write the code, an engineer directs them: https://vibecoding.tech/services?utm_source=21st&utm_medium=component Book a call and say promo code 21ST to get a free 3-day development trial. 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?"

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Value Columns to your project and fits it to your theme.

Code

How Value Columns is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  )
}