AI

SourceCard

Citation card with title, URL, and snippet.

Available inreactangular

Preview

Install

TerminalBash
npx @mcp-elements/cli 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.dev"
        href="https://mcp-elements.dev"
      />
    </SourceCards>
  )
}

Props

PropTypeDefaultDescription
title *stringTitle of the source document or page
domain *stringDomain name shown below the title
hrefstringURL the card links to (opens in new tab)
faviconstringURL of the site favicon image
indexnumberNumeric citation index shown on the card