Verdict Stack

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. Interactive 100%-normalized outcome stacks with a grouped taxonomy legend that highlights one verdict across all subjects. Answers: "What do each subject's outcomes consist of?"

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

Code

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

Usage.tsx

import { VerdictStack } from '@/components/ui/verdict-stack'

// Rounded fictional reconstruction of the donor figure.
export default function VerdictStackDemo() {
  return (
    <VerdictStack
      taxonomy={[
        // Verdict semantics over neutral palette: pass green; failure severity
        // ramp amber → red → maroon; verifier artifacts grey; cheated ink-black.
        { group: 'PASS', tags: [{ key: 'legitimate', label: 'legitimate', color: '#1a7f37' }] },
        {
          group: 'FAIL',
          tags: [
            { key: 'missed_requirement', label: 'missed requirement', color: '#d97706' },
            { key: 'wrong_logic', label: 'wrong logic', color: '#c41e1e' },
            { key: 'regression', label: 'regression', color: '#7f1d1d' },
          ],
        },
        {
          group: 'VERIFIER',
          tags: [
            { key: 'test_mismatch', label: 'test mismatch', color: '#9c9c9c' },
            { key: 'cheated', label: 'cheated', color: '#111111' },
          ],
        },
      ]}
      subjects={[
        {
          label: 'gpt-5.5',
          n: 90,
          counts: {
            legitimate: 60,
            missed_requirement: 18,
            wrong_logic: 6,
            regression: 3,
            test_mismatch: 3,
            cheated: 0,
          },
        },
        {
          label: 'claude-opus-4.7',
          n: 90,
          counts: {
            legitimate: 44,
            missed_requirement: 30,
            wrong_logic: 6,
            regression: 4,
            test_mismatch: 2,
            cheated: 4,
          },
        },
        {
          label: 'gpt-5.4',
          n: 90,
          counts: {
            legitimate: 42,
            missed_requirement: 32,
            wrong_logic: 8,
            regression: 4,
            test_mismatch: 4,
            cheated: 0,
          },
        },
        {
          label: 'claude-sonnet-4.6',
          n: 80,
          counts: {
            legitimate: 24,
            missed_requirement: 38,
            wrong_logic: 8,
            regression: 4,
            test_mismatch: 4,
            cheated: 2,
          },
        },
        {
          label: 'gemini-3.1-pro',
          n: 83,
          counts: {
            legitimate: 8,
            missed_requirement: 40,
            wrong_logic: 16,
            regression: 8,
            test_mismatch: 9,
            cheated: 2,
          },
        },
        {
          label: 'claude-haiku-4.5',
          n: 90,
          counts: {
            legitimate: 0,
            missed_requirement: 52,
            wrong_logic: 20,
            regression: 8,
            test_mismatch: 8,
            cheated: 2,
          },
        },
      ]}
    />
  )
}