Leaderboard Bars

Component 4

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. Horizontal pass-rate bars with ±std whiskers, a gridded 0–100 axis, secondary metric columns, and an out-of-competition row below a hard rule. Answers: "Who clears the bar, with what spread, and at what cost?"

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

Code

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

Usage.tsx

import { LeaderboardBars } from '@/components/ui/leaderboard-bars'

export default function LeaderboardBarsDemo() {
  return (
    <LeaderboardBars
      rowLabel="configuration"
      barLabel="pass@1"
      columns={['cost', 'tokens', 'min']}
      rows={[
        {
          label: 'Opus 4.8',
          sub: 'Claude Code',
          value: 78.7,
          std: 6.1,
          metrics: ['$3.12', '33k', '13'],
          color: '#E8734A',
        },
        {
          label: 'Sonnet 5',
          sub: 'Claude Code',
          value: 74.7,
          std: 2.3,
          metrics: ['$2.42', '29k', '13'],
          color: '#E8734A',
        },
        {
          label: 'GPT-5.5',
          sub: 'Codex',
          value: 66.7,
          std: 4.6,
          metrics: ['$2.34', '16k', '12'],
          color: '#10A37F',
        },
        {
          label: 'Haiku 4.5',
          sub: 'Claude Code',
          value: 53.3,
          std: 4.6,
          metrics: ['$0.57', '18k', '10'],
          color: '#E8734A',
        },
        {
          label: 'Fable 5',
          value: 85,
          valueLabel: '85% · 17/20',
          offside: true,
          offsideTag: 'OFF THE BOARD',
        },
      ]}
    />
  )
}