AI
SourceCard
Citation card with title, URL, and snippet.
Available in
reactangularPreview
Live previewreal component
Install
TerminalBash
npx @mcp-elements/cli add source-cardUsage
source-card-example.tsxTSX
import { SourceCards, SourceCard } from '@mcp-elements/react'
export function Example() {
return (
<SourceCards>
<SourceCard
index={1}
title="Model Context Protocol"
domain="modelcontextprotocol.io"
href="https://modelcontextprotocol.io"
/>
<SourceCard
index={2}
title="mcp-elements docs"
domain="mcp-elements.dev"
href="https://mcp-elements.dev"
/>
</SourceCards>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
title * | string | — | Title of the source document or page |
domain * | string | — | Domain name shown below the title |
href | string | — | URL the card links to (opens in new tab) |
favicon | string | — | URL of the site favicon image |
index | number | — | Numeric citation index shown on the card |