Dev Design Libraryshadcn/ui Citation Components
Dev Design Library indexes 9 shadcn/ui citation components from 3 open-source UI libraries, with the most coming from Notra, Spectrum UI and AI Elements (Svelte). Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Citation components belong to the AI group.
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.
ChatGPT Source ChipNotra · ReactAn inline citation pill with a hover card.
Claude SourcesNotra · ReactSource pills under an assistant reply, built on shadcn Badge.
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.