Rank Bars

Component 6

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 ranking bars — label, zero-based bar, value — with an accent-highlighted hero row. Answers: "Who leads this ranking, and by how much?"

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

Code

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

Usage.tsx

import { RankBarChart } from '@/components/ui/rank-bars'

export default function RankBarsDemo() {
  return (
    <div className="mx-auto w-full max-w-[560px]">
      <p className="mb-4 text-[13px] font-semibold text-[var(--vz-ink,#111)]">
        Coding benchmark · pass rate, Jun 2026
      </p>
      <RankBarChart
        unit="%"
        items={[
          { label: 'Atlas 4', sub: 'Meridian', value: 74.2, highlight: true },
          { label: 'Nova Max', sub: 'Helix Labs', value: 68.9 },
          { label: 'Orion Pro', sub: 'Vantage', value: 63.5 },
          { label: 'Vega 2', sub: 'Meridian', value: 57.1 },
          { label: 'Lumen', sub: 'Helix Labs', value: 44.8 },
        ]}
      />
    </div>
  )
}