React AI Inline Citation

You know how Perplexity shows those little citation badges inline with the text? This component does that. When your AI pulls from sources—RAG results, web searches, documents—you can add these inline citation markers that show the domain and, on hover, give the full details. If there are multiple sources for one claim, there's a carousel to flip through them. You can also style quoted text with that classic blockquote look. It keeps responses clean while still giving users a way to verify where information came from. Essential for research assistants, fact-checking, or anything where source attribution matters.

Inline Citation preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/inline-citation.json

npx shadcn@latest add https://www.shadcn.io/registry/inline-citation.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/inline-citation.json

bunx shadcn@latest add https://www.shadcn.io/registry/inline-citation.json

Related Components

FAQ