AI

SourceCard

Citation card with title, URL, and snippet.

Available inreactangular

Preview

Install

TerminalBash
npx mcp-elements add source-card

Usage

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.wearesnx.studio"
        href="https://mcp-elements.wearesnx.studio"
      />
    </SourceCards>
  )
}

Props

PropTypeDefaultDescription
title *string—Title of the source document or page
domain *string—Domain name shown below the title
hrefstring—URL the card links to (opens in new tab)
faviconstring—URL of the site favicon image
indexnumber—Numeric citation index shown on the card