Source

Displays website sources used by AI-generated content, showing URL details, titles, and descriptions on hover.

Examples

Basic Source

Custom Source

Customize the appearance and labels of the source components. You can use custom labels, numbers, or combine them with favicons.

Installation

Copy and paste the following code into your project.

pnpm dlx shadcn-svelte@latest add https://ai-elements.vercel.app/r/prompt-kit-source.json

Component API

Source

PropTypeDefaultDescription
hrefstring-The URL of the source
childrenSnippet-The content to display

SourceTrigger

PropTypeDefaultDescription
labelstring | number-The label to display
showFaviconbooleanfalseWhether to show the favicon
classNamestring-Additional CSS classes

SourceContent

PropTypeDefaultDescription
titlestring-The title to display
descriptionstring-The description to display
classNamestring-Additional CSS classes