Finding

Component

About

A card that reports one issue found during review, how serious it is, and what to do about it, with a plain-language severity label and an open/accepted/dismissed state.

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

Code

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

Usage.tsx

import Finding from "@/components/ui/finding";

export default function FindingDemo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-4 p-6">
      <Finding
        severity="high"
        title="Unencrypted field stores applicant SSNs"
        where="data-model.ts, line 42"
        detail="The applicant record keeps the Social Security number in plain text. Anyone with read access to the database can see it."
        suggestion="Move the value behind the existing field-level encryption helper, the same one used for bank details."
        onOpen={() => {}}
      />
      <Finding
        severity="medium"
        title="Retry loop has no backoff"
        where="sync-worker.ts, line 118"
        detail="A failed sync retries immediately, up to five times a second, until it succeeds or the queue empties."
        suggestion="Add exponential backoff starting at 500ms."
      />
      <Finding
        severity="low"
        title="Inconsistent date format in export"
        detail="The CSV export writes dates as MM/DD/YYYY while the rest of the product uses ISO 8601."
        state="accepted"
      />
      <Finding
        severity="note"
        title="Consider caching the lookup table"
        detail="This isn't wrong, just slower than it needs to be: the lookup table is rebuilt on every call."
        state="dismissed"
      />
    </div>
  );
}