Sources

Citation list for retrieved documents and grounded answer references.

Sources lists the documents behind a grounded answer. Use the collapsible list under a message, and SourcePreview for inline citation chips.

Deploying Next.js applicationsProduction checklist for builds, migrations, and cutover.

Performance APIBrowser timing signals useful for first-hour monitors.

The RAIL performance modelResponse, Animation, Idle, and Load budgets for UX.

<Sources count={3} defaultOpen>
  <SourcesTrigger />
  <SourcesContent>
    <Source href="https://example.com" title="Example" />
  </SourcesContent>
</Sources>

Installation

pnpm dlx cubix@latest add sources --base aria

Usage

Import

import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from "@/components/cubix/sources"

Example

<Sources count={3} defaultOpen>
  <SourcesTrigger />
  <SourcesContent>
    <Source href="https://example.com" title="Example" />
  </SourcesContent>
</Sources>

Composition

Sources
├── SourcesTrigger
└── SourcesContent
    ├── Source
    └── SourcesEmpty

SourcePreview

Features

Compact trigger with source count and chevron
Citation rows with favicon, title, host, and external link
Inline SourcePreview hover cards for in-text citations

Collapsed

<Sources count={3}>
  <SourcesTrigger />
  <SourcesContent>...</SourcesContent>
</Sources>

Single source

Deploying Next.js applicationsProduction checklist for builds, migrations, and cutover.

<Sources count={1} defaultOpen>
  <SourcesTrigger />
  ...
</Sources>

Empty

This answer was not grounded in retrieved documents.

<Sources count={0} defaultOpen>
  <SourcesTrigger label="0 sources" />
  <SourcesContent>
    <SourcesEmpty>...</SourcesEmpty>
  </SourcesContent>
</Sources>

Without favicons

Internal cutover runbookPrivate ops doc mirrored for the deploy window.Rollback decision treeexample.com

<Source showFavicon={false} ... />

Inline preview

Keep rollback ready and watch p95 for the first hour. The RAIL model still applies for deploy UX budgets.

Keep rollback ready.{" "}
<SourcePreview href="..." title="Performance API">
  [1]
</SourcePreview>

Custom label

Deploying Next.js applicationsnextjs.org

Performance APIdeveloper.mozilla.org

The RAIL performance modelweb.dev

<SourcesTrigger label="Cited references" />

Controlled

<Sources open={open} onOpenChange={setOpen}>

In a message

Start with the changelog, run smoke tests, migrate before cutover, then watch error rate and p95 for the first hour.

Deploying Next.js applicationsProduction checklist for builds, migrations, and cutover.

Performance APIBrowser timing signals useful for first-hour monitors.

The RAIL performance modelResponse, Animation, Idle, and Load budgets for UX.

<Message>
  <MessageContent>
    <Bubble>...</Bubble>
    <Sources count={3} defaultOpen>...</Sources>
  </MessageContent>
</Message>

API Reference

Sources

Prop	Type	Default	Description
count	number	0	Number of cited sources shown in the default trigger label.
open	boolean	-	Controlled open state for the citation list.
defaultOpen	boolean	false	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	-	Called when the list opens or closes.

SourcesTrigger

Prop	Type	Default	Description
label	React.ReactNode	-	Custom trigger text. Defaults to "1 source" or "N sources" from count.
children	React.ReactNode	-	Optional custom trigger content.

Source

Prop	Type	Default	Description
href	string	-	Destination URL opened in a new tab.
title	React.ReactNode	-	Primary citation title. Falls back to hostname or href.
description	React.ReactNode	-	Optional supporting snippet under the title.
hostname	string	-	Override hostname used for the subtitle and favicon.
showFavicon	boolean	true	Show a favicon badge derived from the hostname.

SourcePreview

Prop	Type	Default	Description
href	string	-	Linked source opened from the hover card.
title	React.ReactNode	-	Title shown in the hover card.
description	React.ReactNode	-	Short preview text inside the hover card.
children	React.ReactNode	-	Inline citation marker content, e.g. [1].