Rank Slope

Component 1

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. Two-context slopegraph with a shared linear scale, per-item color, and deterministically de-collided endpoint labels. Answers: "How does the ranking reorder between two contexts?"

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

Code

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

Usage.tsx

import { RankSlope } from '@/components/ui/rank-slope'

export default function RankSlopeDemo() {
  return (
    <RankSlope
      left="SWE-Bench Pro"
      right="DeepSWE"
      unit="%"
      items={[
        { label: 'claude-opus-4.7', from: 64, to: 54, color: '#E8734A' },
        { label: 'gpt-5.5', from: 59, to: 70, color: '#10A37F' },
        { label: 'gpt-5.4', from: 58, to: 56, color: '#10A37F' },
        { label: 'claude-sonnet-4.6', from: 54, to: 32, color: '#E8734A' },
        { label: 'gpt-5.4-mini', from: 54, to: 24, color: '#10A37F' },
        { label: 'gemini-3.1-pro', from: 46, to: 10, color: '#4285F4' },
        { label: 'claude-haiku-4.5', from: 39, to: 0, color: '#E8734A' },
        { label: 'gemini-3-flash', from: 35, to: 5, color: '#4285F4' },
      ]}
    />
  )
}