SourceCard

Displays a cited source link with title, domain, and optional excerpt — used in AI responses with web search grounding.

React Documentation

react.dev

The library for web and native user interfaces.

MDN Web Docs

developer.mozilla.org

Resources for developers, by developers.

import { SourceCard } from "@aetherstack/ui"

Installation

terminal

npx aether-ui add source-card

Import

import.tsx

import { SourceCard } from "@aetherstack/ui"

Usage

sourcecard.tsx

<SourceCard
  title="React Documentation"
  url="https://react.dev"
  excerpt="The library for web and native user interfaces."
/>

{/* With favicon */}
<SourceCard
  title="MDN Web Docs"
  url="https://developer.mozilla.org"
  excerpt="Resources for developers, by developers."
  favicon="https://developer.mozilla.org/favicon.ico"
/>

Props

Prop	Type	Default	Description
title*	string	—	Card title — typically the page title of the source.
url*	string	—	Link URL; the domain is extracted and shown below the title.
excerpt	string	—	Short excerpt or description shown below the domain.
favicon	string	—	Favicon image URL displayed beside the title.
className	string	—	Additional CSS classes.

* Required

Accessibility

→The card is rendered as an anchor element — keyboard-navigable and operable with Enter.
→Favicon image has alt='favicon for <domain>' for screen readers.