Paired Bars

Component 21

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. Grouped horizontal bars for exactly two measurements per subject, sharing one gridded scale and one entity hue. Answers: "How do two measurements of the same subjects compare?"

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

Code

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

Usage.tsx

import { PairedBars } from '@/components/ui/paired-bars'

export default function PairedBarsDemo() {
  return (
    <PairedBars
      barLabel="pass rate"
      unit="%"
      max={60}
      ticks={[0, 20, 40, 60]}
      groups={[
        {
          label: 'claude-opus-4.7',
          color: '#E8734A',
          a: { label: 'mini-swe-agent', value: 50 },
          b: { label: 'Claude Code', value: 40 },
        },
        {
          label: 'gpt-5.5',
          color: '#10A37F',
          a: { label: 'mini-swe-agent', value: 40 },
          b: { label: 'Codex CLI', value: 40 },
        },
        {
          label: 'gemini-3.1-pro',
          color: '#4285F4',
          a: { label: 'mini-swe-agent', value: 40 },
          b: { label: 'Gemini CLI', value: 20 },
        },
      ]}
    />
  )
}