SourceCard

RAG retrieval result card showing source title, content preview, relevance score, and optional link. Available in full and compact variants for different layout needs.

SourceCard — Full Variant

React Server Components

https://react.dev/reference/rsc/server-components

High 95%

Server Components allow you to write UI that can be rendered and optionally cached on the server. They run only on the server and have zero impact on bundle size.

Next.js Documentation

https://nextjs.org/docs

Medium 68%

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

Webpack Module Federation

Low 32%

Module Federation allows a JavaScript application to dynamically load code from another application at runtime. This enables micro-frontend architectures.

SourceCard — Compact Variant

React Server Components95%

Server Components allow you to write UI that can be rendered on the server.

Next.js Documentation68%

Next.js is a React framework for building full-stack web applications.

Webpack Module Federation32%

Module Federation allows dynamic code loading from another application.

Import

tsx

import { SourceCard } from "@arc-lo/ui";

Basic usage

tsx

<SourceCard
  title="React Server Components"
  url="https://react.dev/reference/rsc/server-components"
  content="Server Components allow you to write UI that can be rendered on the server."
  relevance={0.95}
/>

{/* Compact variant */}
<SourceCard
  variant="compact"
  title="React Documentation"
  url="https://react.dev"
  content="The library for web and native user interfaces."
  relevance={0.72}
/>

Props

Prop	Type	Default	Description
`title`	`string`	—	Source document title (required)
`url`	`string`	—	Link to the source
`content`	`string`	—	Preview text content (required)
`relevance`	`number`	—	Relevance score from 0 to 1 (required)
`variant`	`"compact" \| "full"`	`"full"`	Display variant

Relevance levels

Range	Color	Label
`0.8 - 1.0`	Emerald	High
`0.5 - 0.79`	Amber	Medium
`0 - 0.49`	Red	Low