Provenance badgePro

A content credentials badge with a popover of the signed edit history: who signed it, every step since it was made, and a link to inspect.

Markdown

On this page

ProA content credentials badge on an image with the signed edit history.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/provenance-badge

Usage

tsx

import { ProvenanceBadge } from "@/components/ui/chatcn/pro/provenance-badge"

<ProvenanceBadge
  status="verified"
  issuer="Studio Cloud"
  signedAt={manifest.signedAt}
  history={manifest.actions}
  inspectHref={inspectUrl}
/>

The badge renders what your verifier reports; it does not read manifests itself. Map your C2PA reader's validation result to a status and its actions to history, oldest first. Mark steps made by a generative model with generative so they read as such.

Examples

Statuses and variants

ProVerified, unverified, altered, none and loading in all three variants.

Props

Prop	Type	Notes
`status`	`"verified" \| "unverified" \| "invalid" \| "none" \| "loading"`	Invalid reads Altered
`issuer`, `signedAt`
`history`	`ProvenanceEntry[]`	`action`, `tool`, `actor`, `date`, `detail`, `generative`
`inspectHref`, `onInspect`
`variant`	`"badge" \| "overlay" \| "icon"`	Overlay sits on an image corner
`label`, `locale`, `open`, `onOpenChange`, `side`, `align`

Accessibility

The trigger is named with the status: "Content credentials: Verified". Every status has its own shield shape and word, never color alone.
The history is an ordered list. Generative steps have a hollow dot and the word generative.

Motion

The popover grows from the badge in 180 ms, and appears at once when opened from the keyboard.