ProvenanceBadge

Wrap any content — image, video, text block — and a clickable “Pr” squircle tag appears. Clicking it opens a credentials-style popover showing date, producer, AI tool used, license, and verification status.

The badge is intentionally always dark (near-black with white text) so it stands out as a provenance mark on any background, regardless of your app’s light/dark theme.

Preview
Code

import { ProvenanceBadge } from "@provenancekit/ui";

// Floating "Pr" tag over an image (default — bottom-right corner)
// Click the badge → popover shows: date, Sarah Kim + Illustrated Digest,
// Claude Opus 4.6 (editorial polish), CC-BY-4.0, editorial-review verified
<ProvenanceBadge cid="bafybei..." position="bottom-right">
  <img src="/header-image.png" alt="AI-generated article header" />
</ProvenanceBadge>

// Inline badge next to an article byline
<ProvenanceBadge cid="bafybei..." variant="inline" size="sm">
  <span>By Sarah Kim · AI-assisted · Illustrated Digest</span>
</ProvenanceBadge>

// Pre-fetched bundle (skip auto-fetch) + navigate on "View full provenance"
<ProvenanceBadge
  bundle={myBundle}
  onViewDetail={() => router.push(`/provenance/${cid}`)}
>
  <video src="/video.mp4" />
</ProvenanceBadge>

What the preview shows

The preview demonstrates two real-world scenarios from “The Illustrated Article” — a published piece with four contributors:

Sarah Kim (human) — wrote the original draft
Illustrated Digest (organisation) — publisher and editorial team
Claude Opus 4.6 (AI) — polished the article text
Flux Schnell (AI) — generated the header image

Clicking either “Pr” badge opens the Content Credentials popover. The inline variant is used on the article byline so readers can inspect provenance without covering the content. Clicking the “Pr” tag opens a provenance credentials card with clean labeled rows:

Row	Source
Date	Timestamp of the primary action
Produced by	Primary creator entity name
App or tool used	AI provider + model (from `ext:ai@1.0.0`)
License	License identifier (from `ext:license@1.0.0`)
Signed with	Verification policy (from `ext:verification@1.0.0`)

Only rows with available data are shown. An optional “View full provenance” button (via onViewDetail) navigates to a detail page.

Font

The “Pr” mark defaults to Red Hat Display. If your app already loads Red Hat Display it will be used automatically. Override with the CSS variable:

:root {
  --pk-badge-font-family: 'Your Font', system-ui, sans-serif;
}

To load Red Hat Display from Google Fonts if your app doesn’t already include it:

<link
  href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@700;800&display=swap"
  rel="stylesheet"
/>

Props

Prop	Type	Default	Description
`cid`	`string`	—	Resource CID — auto-fetches bundle
`bundle`	`ProvenanceBundle`	—	Pre-fetched bundle (skips auto-fetch)
`children`	`ReactNode`	—	Content to wrap (image, video, text, etc.)
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"bottom-right"`	Tag position in floating mode
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tag size (24 / 32 / 44 px square)
`variant`	`"floating" \| "inline"`	`"floating"`	Layout mode
`popoverSide`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Popover opening direction
`onViewDetail`	`() => void`	—	Called when user clicks “View full provenance”
`loadingSlot`	`ReactNode`	—	Custom loading state
`errorSlot`	`ReactNode`	—	Custom error state
`className`	`string`	—	Additional CSS class on the wrapper

Customising the badge

:root {
  --pk-badge-bg:          #0f172a;  /* squircle background */
  --pk-badge-fg:          #f8fafc;  /* "Pr" text colour */
  --pk-badge-font-family: 'Red Hat Display', system-ui, sans-serif;
}

Overview

Components

What the preview shows

The popover

Font

Props

Customising the badge

Overview

Components

​What the preview shows

​The popover

​Font

​Props

​Customising the badge

What the preview shows

The popover

Font

Props

Customising the badge