Dev Design LibraryOpen the library

React Citation Components

Dev Design Library indexes 19 React citation components from 9 open-source UI libraries, with the most coming from Notra, Spectrum UI, LocalMode, Halaska UI and Kokonut UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. Citation components belong to the AI group.

Ai Message SourceReact Spectrum · React
Answer with citationsReUI · ReactNumbered citations in a research answer open the sources and move focus to the cited source.
Inline CitationAI Elements · ReactA hoverable citation component that displays source information and quotes inline with text, perfect for AI-generated…
AI Inline CitationsKokonut UI · ReactAn answer with source chips beside each claim. One preview glides between chips and lights up the sentence it backs.
CitationsbeUI · ReactConnects completed claims to supporting sources.
Ask Docs FooterSpectrum UI · ReactA docs question box that streams a cited answer, over link columns.
AI Overview CitationNotra · ReactA source chip built on shadcn Badge and HoverCard.
Inline CitationLocalMode · ReactInline superscript citation markers in prose that open a hovercard with the cited local chunk (title, excerpt, quoted…
Citations PatternHalaska UI · React
Citation SourcesSpectrum UI · ReactInline citation markers with hover previews or a footnote list.
ChatGPT Source ChipNotra · ReactAn inline citation pill with a hover card.
Source Citation ListLocalMode · ReactIn-message attributed-sources list extending Sources: numbered items, a similarity score with a radial confidence…
Streaming TextSpectrum UI · ReactA streamed answer with inline citations, sources, and follow-ups.
Claude SourcesNotra · ReactSource pills under an assistant reply, built on shadcn Badge.
SourcesLocalMode · ReactRetrieval citations from local RAG results: a collapsible container with favicon/title/excerpt chips, a 0-1 relevance…
Gemini Source ChipNotra · ReactAn inline source pill with a hover card.
OpenCode SourcesNotra · ReactWeb search lines and a collapsible cited-sources list with an optional sequenced reveal.
Perplexity CitationNotra · ReactAn inline source pill with favicon, label and +N count, built on shadcn Badge.
Perplexity Sources SummaryNotra · ReactStacked favicons and the source count next to the answer actions.

Libraries with React citation components

Related categories