Citation Components

Dev Design Library indexes 20 citation components from 10 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. 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.
• Inline CitationAI Elements (Svelte) · SvelteAn inline citation system with hover cards and carousel views for source-backed AI content.
• 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 citation components

• Notra
• Spectrum UI
• LocalMode
• Halaska UI
• Kokonut UI

Related categories

• React Citation Components
• Tailwind CSS Citation Components
• shadcn/ui Citation Components
• AI Element Components
• Prompt Input Components
• AI Orb Components
• Conversation Components
• Attachment Components
• Thinking Indicator Components
• Voice Input Components
• Model Selector Components
• Tool Call Components
• Sources Components
• Streaming Text Components
• Reasoning Components
• AI Message Components
• Suggestions Components
• Task Queue Components
• Agent Plan Components