BJORK Response feedback

Component 1

About

Response feedback 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 feedback to your project and fits it to your theme.

Code

How BJORK Response feedback 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 { ResponseFeedback, type FeedbackPayload } from "@/components/ui/bjork-response-feedback";

const ANSWER =
  "Kestrel Mini supports a 128k context window and streams at roughly 90 tokens a second on the standard tier. For long documents, split them into sections and summarise each one first.";

function Demo({
  run,
  last,
  onSubmit,
  onUndo,
}: {
  run: number;
  last: FeedbackPayload | null;
  onSubmit: (payload: FeedbackPayload) => void;
  onUndo: () => void;
}) {
  const isPreview = false;

  return (
    <div className="flex w-[min(460px,calc(100vw-56px))] flex-col gap-3">
      <p className="text-[14px] leading-[22px] text-[color:var(--bjork-text-medium)]">{ANSWER}</p>
      {isPreview ? (
        <ResponseFeedback defaultValue="down" defaultOpen defaultReasons={["Inaccurate", "Outdated sources"]} />
      ) : (
        <ResponseFeedback key={run} onSubmit={onSubmit} onUndo={onUndo} />
      )}
      {!isPreview && (
        <p className="mt-6 min-h-4 max-w-full truncate text-center font-mono text-[11px] text-[color:var(--bjork-text-faint)]">
          {last
            ? `onSubmit → ${last.rating}${last.reasons.length ? ` · ${last.reasons.join(", ")}` : ""}${last.comment ? ` · “${last.comment}”` : ""}`
            : "Nothing sent yet"}
        </p>
      )}
    </div>
  );
}
function SourceDemo(){
const [run, setRun] = useState(0);
const [last, setLast] = useState<FeedbackPayload | null>(null);
const reset = () => {
    setLast(null);
    setRun((r) => r + 1);
  };
return <>

      <Demo run={run} last={last} onSubmit={setLast} onUndo={() => setLast(null)} />
    
</>;
}
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>}