Citation

Source reference associated with generated content.

Large language models can produce inaccurate statements
1Source: MDN Web Docs
, so claims should be checked against primary sources.

html

<div class="citation-demo" style="--accent:#BFD9F2;">
  Large language models can produce inaccurate statements<details class="citation citation--numeric"><summary class="citation__marker">1</summary><span class="citation__source">Source: MDN Web Docs</span></details>, so claims should be checked against primary sources.
</div>
<style>
.citation-demo { font: 15px/1.7 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; padding: 16px; border-radius: 12px; box-sizing: border-box; }
.citation { display: inline; }
.citation__marker { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; padding: 0 .3em; margin: 0 .15em; border-radius: 999px; border: 1.5px solid var(--accent); color: var(--accent); font: 700 .72em/1 system-ui, sans-serif; cursor: pointer; list-style: none; vertical-align: baseline; }
.citation__marker::-webkit-details-marker { display: none; }
.citation--bracket .citation__marker { border-radius: 4px; border: none; background: color-mix(in srgb, var(--accent) 18%, #FAF7F2); }
.citation--bracket .citation__marker::before { content: "["; }
.citation--bracket .citation__marker::after { content: "]"; }
.citation--superscript .citation__marker { border: none; min-width: 0; height: auto; padding: 0; margin: 0 .1em; vertical-align: super; font-size: .68em; background: transparent; }
.citation__source { display: block; margin-top: 6px; padding: 8px 10px; background: color-mix(in srgb, var(--accent) 14%, #FAF7F2); border-left: 3px solid var(--accent); border-radius: 6px; font-size: .82em; color: #241430; }
</style>

tailwind

<div class="citation-demo-tw font-sans text-[15px] leading-[1.7] text-[#241430] bg-[#FAF7F2] max-w-[480px] p-4 rounded-xl box-border" style="--accent:#BFD9F2;">
  Large language models can produce inaccurate statements<details class="citation-tw citation-tw--numeric"><summary class="citation-tw__marker">1</summary><span class="citation-tw__source block mt-1.5 px-2.5 py-2 rounded-md text-[0.82em] text-[#241430]" style="background:color-mix(in srgb, var(--accent) 14%, #FAF7F2);border-left:3px solid var(--accent);">Source: MDN Web Docs</span></details>, so claims should be checked against primary sources.
</div>
<style>
.citation-tw { display: inline; }
.citation-tw__marker { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; padding: 0 .3em; margin: 0 .15em; border-radius: 999px; border: 1.5px solid var(--accent); color: var(--accent); font: 700 .72em/1 system-ui, sans-serif; cursor: pointer; list-style: none; vertical-align: baseline; }
.citation-tw__marker::-webkit-details-marker { display: none; }
.citation-tw--bracket .citation-tw__marker { border-radius: 4px; border: none; background: color-mix(in srgb, var(--accent) 18%, #FAF7F2); }
.citation-tw--bracket .citation-tw__marker::before { content: "["; }
.citation-tw--bracket .citation-tw__marker::after { content: "]"; }
.citation-tw--superscript .citation-tw__marker { border: none; min-width: 0; height: auto; padding: 0; margin: 0 .1em; vertical-align: super; font-size: .68em; background: transparent; }
</style>

react

export function Citation({
  sourceLabel = "MDN Web Docs",
  index = 1,
  style = "numeric",
  accent = "#BFD9F2",
}) {
  const markerStyle = {
    numeric: { borderRadius: 999, border: `1.5px solid ${accent}`, minWidth: "1.4em", height: "1.4em", padding: "0 0.3em", background: "transparent" },
    bracket: { borderRadius: 4, border: "none", minWidth: "1.4em", height: "1.4em", padding: "0 0.3em", background: `color-mix(in srgb, ${accent} 18%, #FAF7F2)` },
    superscript: { border: "none", minWidth: 0, height: "auto", padding: 0, verticalAlign: "super", fontSize: "0.68em", background: "transparent" },
  }[style] ?? {};
  const label = style === "bracket" ? `[${index}]` : index;
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 15, lineHeight: 1.7, color: "#241430",
      background: "#FAF7F2", maxWidth: 480, padding: 16, borderRadius: 12, boxSizing: "border-box" }}>
      Large language models can produce inaccurate statements
      <details style={{ display: "inline" }}>
        <summary style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", margin: "0 0.15em",
          color: accent, font: "700 0.72em/1 system-ui, sans-serif", cursor: "pointer", listStyle: "none",
          verticalAlign: "baseline", ...markerStyle }}>{label}</summary>
        <span style={{ display: "block", marginTop: 6, padding: "8px 10px", borderRadius: 6, fontSize: "0.82em",
          color: "#241430", background: `color-mix(in srgb, ${accent} 14%, #FAF7F2)`, borderLeft: `3px solid ${accent}` }}>
          Source: {sourceLabel}
        </span>
      </details>
      , so claims should be checked against primary sources.
    </div>
  );
}