# Inline Citations
Superscript citation markers with a compact source footer.
- Category: Text Outputs
- Source: AICSS (https://www.aicss.dev/components/inline-citations)
- Author: @kvnkld (https://x.com/kvnkld)
- Styling: Self-contained CSS with CSS custom properties (design tokens). Theme-aware via [data-theme] (light/dark).
## Instructions
Add this component to the project. Keep the styling self-contained. Map the design tokens (CSS custom properties) to the project's theme if they are not already defined.
## Code
### React - `InlineCitations.tsx`
```tsx
import styles from "./InlineCitations.module.css";
type CiteRef = { n: number; label: string; host: string; url: string };
const TEXT =
"Transformers scale well with data and compute[1], though attention is quadratic in sequence length[2].";
const REFS: CiteRef[] = [
{ n: 1, label: "Attention Is All You Need", host: "arxiv.org", url: "https://arxiv.org/abs/1706.03762" },
{ n: 2, label: "Efficient Transformers: A Survey", host: "arxiv.org", url: "https://arxiv.org/abs/2009.06732" },
];
function CiteArrow() {
return (
);
}
export function InlineCitations({
text = TEXT,
refs = REFS,
}: {
text?: string;
refs?: CiteRef[];
}) {
// Markers like [1] in the text become small numbered chips that link to
// the source and reveal the reference name in a tooltip on hover.
const parts = text.split(/(\[\d+\])/g);
return (
{parts.map((part, i) => {
const m = part.match(/^\[(\d+)\]$/);
if (!m) return {part};
const r = refs.find((x) => x.n === Number(m[1]));
return r ? (
{r.n}{r.label}
) : (
{m[1]}
);
})}