Sources
Inline citation markers and a source list that light each other, with hover previews of the cited passage.
New in 1.6.Built on Hover Card and Icons.
Our API returns created_at as 2026-10-17 09:30:00 with no zone and the mobile team keeps showing times an hour off. Should the column be timestamp or timestamptz, and what should go over the wire?
Make the column timestamptz. Postgres converts every input to UTC and stores that instant, so the value no longer depends on the zone of whoever wrote it2. The wiki is blunter: plain timestamp is for wall-clock times, never for moments5.
On the wire, send RFC 3339 with an explicit offset, 2026-10-17T08:30:00Z1. In the browser, toISOString() already produces that form4. The hour you're losing is already in your tracker: the driver parses zone-less columns in the server's local time3.
- 1Date and Time on the Internet: Timestampsrfc-editor.orgRFC 3339, § 5.6This document defines a date and time format for use in Internet protocols that is a profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar.
- 28.5. Date/Time Typespostgresql.orgPostgreSQL 17For timestamp with time zone, the internally stored value is always in UTC. An input value that has an explicit time zone specified is converted to UTC using the appropriate offset for that time zone.
- 3Order timestamps come back an hour off in eu-centralgit.nightshift.devIssue #2141Columns of type timestamp come back as Dates built in the process's local time. On a host set to Europe/Berlin every value is an hour off from what psql shows.
- 4Date.prototype.toISOString()developer.mozilla.orgMDNThe timezone is always UTC, as denoted by the suffix Z.
- 5Don't Do This: timestamp (without time zone)wiki.postgresql.orgPostgreSQL wikiDon't use the timestamp type to store timestamps, use timestamptz (also known as timestamp with time zone) instead.
Installation
npx shadcn@latest add https://neonkit.heyaadi.com/r/sources.jsonUsage
import { Citation, SourceList, Sources } from "@/components/ui/sources"
<Sources sources={sources}>
<p>Postgres stores timestamptz as UTC<Citation index={2} />.</p>
<SourceList />
</Sources>Examples
Compact chips
variant="chips" keeps the list to one row of domains. Each chip previews its source on hover, and max folds the rest behind a +2 that moves focus to the first one it reveals.
Quoting the passage
quote replaces the source's snippet for one citation, so two markers on the same page can each show the sentence they rest on. Both markers for source 1 light together.
List on its own
SourceList takes sources directly when there are no inline markers.
API reference
Sources
Holds the sources for every Citation and SourceList inside it and links their light. Renders a div.
| Prop | Type | Default |
|---|---|---|
sources | Source[]In citation order: index 1 is the first. A Source is { title, url, domain?, snippet?, date?, meta? }. | None |
color | NeonColorPalette name or hex. Falls back to --neon-accent, then cyan. | inherited |
Source
| Prop | Type | Default |
|---|---|---|
title | stringThe page or document title. | None |
url | stringWhere the marker and list item link. http(s) links open in a new tab. | None |
domain | stringShown instead of the host, without www. | url host |
snippet | stringA passage from the page. Two lines in the list, four in the preview. | None |
date | stringISO date, 2024-09-26, or 2002-07 for a month. Printed as Sep 26, 2024 or Jul 2002. | None |
meta | stringA short qualifier after the domain: RFC 9110, Issue #2141, PostgreSQL 17. | None |
Citation
An anchor. Other anchor attributes pass through.
| Prop | Type | Default |
|---|---|---|
index | number1-based position in the surrounding sources. | None |
source | SourceThe source, when the citation isn't inside Sources. | None |
quote | stringThe passage this claim rests on. Replaces the snippet in the preview. | None |
preview | booleanOpen a preview card on hover and keyboard focus. | true |
color | NeonColorPalette name or hex. | inherited |
SourceList
An ordered list. Other list attributes pass through.
| Prop | Type | Default |
|---|---|---|
variant | "list"list prints title, domain, date and snippet. chips prints the domain and previews the rest. | "list" |
sources | Source[]The sources, when the list isn't inside Sources. | None |
max | numberChips only: how many to show before a +n button. | None |
label | stringAccessible name of the list. | "Sources" |
color | NeonColorPalette name or hex. | inherited |
Accessibility
- Each marker is a link named after its source, "Source 2: 8.5. Date/Time Types (postgresql.org)", so a screen reader reads more than a number.
- Tab to a marker to open its preview; the open card describes the marker through aria-describedby, and Escape closes it.
- Markers are inline text set directly after the word, so a number never starts a line on its own.
- The list is an <ol>, so its numbers match the markers for people who can't see the plates.
- Light is state only: a marker, its plate in the list and its row light while either is hovered or focused, and decay over 300ms.