BJORK Response compare

Component

About

Response compare is a production-ready ai component from BJORK UI, packaged for shadcn registries.

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

Code

How BJORK Response compare is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { ResponseCompare, SAMPLE_COMPARISON, type CompareVote } from "@/components/ui/bjork-response-compare";

const POSED_VOTE: CompareVote = {
  choice: "a",
  rubric: {
    Accuracy: { a: true, b: false },
    Helpfulness: { a: true, b: false },
    Tone: { a: true, b: true },
  },
};

const DEFAULT_BLIND = true;

function Demo({
  blind,
  run,
  vote,
  onVote,
}: {
  blind: boolean;
  run: number;
  vote: CompareVote | null;
  onVote: (vote: CompareVote | null) => void;
}) {
  const isPreview = false;

  if (isPreview) {
    return (
      <div className="w-[min(700px,calc(100vw-56px))]">
        <ResponseCompare {...SAMPLE_COMPARISON} rubric={[]} defaultValue={POSED_VOTE} />
      </div>
    );
  }

  return (
    <div className="flex w-[min(700px,calc(100vw-56px))] flex-col items-stretch gap-6">
      <ResponseCompare key={`${run}-${blind}`} {...SAMPLE_COMPARISON} blind={blind} onVote={onVote} />
      <p className="text-center font-mono text-[11px] text-[color:var(--bjork-text-faint)]">
        {vote ? `onVote → ${vote.choice}` : "Arrow keys move between choices"}
      </p>
    </div>
  );
}
function SourceDemo(){
const [blind, setBlind] = useState(DEFAULT_BLIND);
const [run, setRun] = useState(0);
const [vote, setVote] = useState<CompareVote | null>(null);
const reset = () => {
    setBlind(DEFAULT_BLIND);
    setVote(null);
    setRun((r) => r + 1);
  };
return <>

      <Demo blind={blind} run={run} vote={vote} onVote={setVote} />
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}