React AI Sources

If you're building a RAG-powered chat or research assistant, you need a way to show where information came from. This component gives you a collapsible "Used X sources" section that expands to reveal citation links. Click the trigger, see the sources—simple as that. Each source renders with a book icon and opens in a new tab. The whole thing stays collapsed by default so it doesn't clutter up long responses, but the info's there when users want to verify or dig deeper. Essential for any AI that retrieves documents and needs to show its work.

Sources preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/sources.json

npx shadcn@latest add https://www.shadcn.io/registry/sources.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/sources.json

bunx shadcn@latest add https://www.shadcn.io/registry/sources.json

Related Components

FAQ