Skip to content

Sources

Lists what the answer rests on, and what wasn’t checked.

Use it when

  • An answer rests on files or records that people may want to check.
  • Part of the question wasn’t covered, and the reader needs to know which part.

Don’t use it when

  • You’re showing files someone attached or uploaded. Use AttachmentRow.
  • One figure needs its source beside it. Use InlineCitation, and list them all in Sources.

The rule it follows

  • Every number opens down to the entry behind it.

    Check: Click any figure. It opens the entries it was built from.

All 3 principles

Before and after

AI

Yes. Invoice MFL-58821 was entered twice and paid twice, $48,216.40 each time.

AP says the system blocks a repeated supplier invoice number.

Found in supplier_invoices_fy2026_h1.csv.

AI

Yes. Invoice MFL-58821 was entered twice and paid twice, $48,216.40 each time. 

AP says the system blocks a repeated supplier invoice number. 

Sources

  1. 1
    supplier_invoices_fy2026_h1.csv116 KB
  2. 2
    05_interview_ar_ap_2026-10-14.txt4 KB

Not checked

  • KUS’s bank statements: the only bank file is bank_export_kjp_2026-09.csv, so both payments are as the invoice file records them.
  • Invoices outside H1: supplier_invoices_fy2026_h1.csv holds H1 only.
The answer lists every file it read, and says what it didn’t check.

Install

pnpm dlx shadcn@latest add https://tabularui.com/r/sources.json

Usage

import { Sources } from '@/components/tabular-ui/components/product/Sources'; <Sources  sources={[    { id: 'invoices', name: 'supplier_invoices_fy2026_h1.csv', size: '116 KB', href: '/files/invoices' },    { id: 'interview', name: '05_interview_ar_ap_2026-10-14.txt', size: '4 KB', href: '/files/interview' },  ]}  notChecked={['Invoices after September: the supplier file covers H1.']}/>

Set up your app firstSources in Storybook