Candor UI

Result card

Pro

A finished piece of work, handed over: the answer first, in a few lines, then the receipt (what it cost, how long it took, what checked it) and the files to open or download, then your actions (Accept, Ask for changes). The receipt prints your values as given; a line you don't know is a line you leave out, never an estimate dressed as a fact. The answer is read into safe blocks, never HTML.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/result-card

Brings in: chat, file-list, locale, message-content, safe-markdown, work, utils

Usage

TSX · The example above
"use client"

import { ResultCard } from "@/components/result-card"
import { Button } from "@/components/ui/button"

export default function Example() {
  return (
    <ResultCard
      className="max-w-xl"
      title="Pricing review"
      status={{ label: "Checked", tone: "success" }}
      // The answer first, as markdown text: read into safe blocks, never HTML.
      answer={"Merge **Starter** and **Basic** into one plan at the Starter price. The three plans left cover 92% of last quarter's revenue.\n\nAnnual discounts and grandfathered contracts don't change."}
      // Your values as given; leave out what you don't know.
      receipt={[
        { label: "Cost", value: "$1.84", note: "of a $4 limit" },
        { label: "Took", value: "11 minutes" },
        { label: "Checked by", value: "Checker, against the source sheet" },
      ]}
      files={[{ id: "report", name: "Pricing review.docx", size: 48_000, readable: true, formats: [{ id: "docx", label: "Word" }, { id: "pdf", label: "PDF" }] }]}
      onOpenFile={() => {}}
      onDownloadFile={() => {}}
      actions={
        <>
          <Button variant="ghost" size="sm">
            Ask for changes
          </Button>
          <Button size="sm">Accept</Button>
        </>
      }
    />
  )
}

<ResultCard>

PropTypeDefaultDescription
titlerequiredstring—What it is, as the heading: "Result 1", "Pricing review".
answerrequiredstring | MessageBlock[]—The answer, first: markdown text (read into safe blocks) or blocks.
status{ label: string; tone?: "default" | "attention" | "success" | undefined } | undefined—Where it stands, in words, with a tone: `{ label: "Checked", tone: "success" }`.
receiptReceiptLine[] | undefined—What it cost, how long it took, what checked it: your values, as given.
filesDeliverable[] | undefined—The files it produced.
onOpenFile((id: string) => void) | undefined—Adds Open to readable files.
onDownloadFile((id: string, format?: string) => void) | undefined—Adds Download to files; called with the file's id and format.
actionsReact.ReactNode | undefined—Buttons at the foot: Accept, Ask for changes.
sourcesMessageSource[] | undefined—Sources the answer cites by marker.
onOpenEntity((entity: EntityRef) => void) | undefined—Makes entity chips in the answer open their thing.
classNamestring | undefined—Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under resultCard in <LocaleProvider strings={{ … }}>; the table is exported as resultCardStrings.

KeyEnglish
receiptReceipt
filesFiles