Next.js Quickstart - Clerk
clerk.comLearn how to add authentication to your Next.js application with Clerk.
Authentication - Next.js
nextjs.orgLearn how to implement authentication in Next.js applications.
Managing State - React
react.devLearn how to manage state effectively in React applications.
clerk/javascript - GitHub
github.comOfficial Clerk JavaScript SDK monorepo with React, Next.js, and more.
Overview
A collapsible component for displaying AI response citations and sources. Shows source count badge, favicons, and optional snippets. Essential for RAG (Retrieval-Augmented Generation) and search-based AI applications.
Installation
bunx shadcn@latest add @elements/sourcesUsage
import {
Sources,
SourcesTrigger,
SourcesContent,
Source,
} from "@/components/elements/ai-elements/agentic/sources";
const sources = [
{
url: "https://react.dev/learn",
title: "React Documentation",
snippet: "Learn React with interactive tutorials and guides.",
},
{
url: "https://nextjs.org/docs",
title: "Next.js Documentation",
},
];
export function SourcesExample() {
return (
<Sources sources={sources}>
<SourcesTrigger>Referenced Sources</SourcesTrigger>
<SourcesContent />
</Sources>
);
}Custom Source Rendering
export function CustomSourcesExample() {
return (
<Sources sources={sources}>
<SourcesTrigger>Citations</SourcesTrigger>
<SourcesContent>
<div className="space-y-2">
{sources.map((source, i) => (
<Source key={i} source={source} />
))}
</div>
</SourcesContent>
</Sources>
);
}Props
Sources
| Prop | Type | Default | Description |
|---|---|---|---|
sources | Source[] | [] | Array of source objects |
defaultOpen | boolean | false | Initial open state |
open | boolean | - | Controlled open state |
onOpenChange | (open: boolean) => void | - | Callback when open state changes |
Source
interface Source {
url: string;
title: string;
favicon?: string;
snippet?: string;
}Source
| Prop | Type | Description |
|---|---|---|
source | Source | Source object to display |
Features
- Source count badge in trigger
- Automatic favicon fetching via Google
- Custom favicon support
- Snippet display with line clamping
- Grid layout (responsive 2 columns)
- External link indicator on hover
- Collapsible with smooth animations