Tailwind CSS Citation Components

Dev Design Library indexes 19 Tailwind CSS citation components from 9 open-source UI libraries, with the most coming from Notra, Spectrum UI, LocalMode, Kokonut UI and AI Elements. 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 styles its components with Tailwind CSS utility classes. 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…
• 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 Tailwind CSS citation components

• Notra
• Spectrum UI
• LocalMode
• Kokonut UI
• AI Elements

Related categories

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