Cited List

An answer as numbered points, each a sentence followed by its sources as small muted chips.

The launch moved to 14 May, after the supplier slipped by two weeks. Kickoff notes Q3 launch plan and supplier schedule (revised)
Marketing keeps its budget; the print run is cut by a third. Budget review
Nobody owns the press kit yet.

Install

Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Cited List before installation. Retain the digest printed by this command.

pnpm exec vegastack-design verify cited-list

Install with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.

pnpm dlx shadcn@4.21.0 add @vegastack/cited-list

Run the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.

Usage

import { Citation, CitedList, CitedListItem } from "@/components/ui/cited-list";

<CitedList>
  <CitedListItem
    citations={<Citation href="/notes/12">Kickoff notes</Citation>}
  >
    The launch moved to 14 May.
  </CitedListItem>
</CitedList>;

The launch moved to 14 May, after the supplier slipped by two weeks. Kickoff notes Q3 launch plan and supplier schedule (revised)
Marketing keeps its budget; the print run is cut by a third. Budget review
Nobody owns the press kit yet.

Anatomy

CitedList — data-slot="cited-list"

CitedListItem — data-slot="cited-list-citations" | "cited-list-item"

Citation — data-slot="citation-icon"

Examples

Citations as buttons

Citation is a link by default. Pass render to draw it as another element — a router link, or a button that plays a recording from the cited moment. Give an icon-led chip whose label is a bare value (a time) an aria-label that says what it does.

The team agreed to ship the beta to ten customers first.

Nothing playing

<Citation
  icon={<Play />}
  aria-label="Play from 04:12"
  render={<button type="button" onClick={play} />}
>
  04:12
</Citation>

API Reference

Prop	Type	Default	Description
`citations`	`React.ReactNode`	—	The sources this point rests on, usually `Citation`s, shown after the text.

Data attributes and CSS variables on CitedListItem

Attribute	Values
`data-slot`	`"cited-list-citations" \| "cited-list-item"`

Prop	Type	Default	Description
`icon`	`React.ReactNode`	—	A leading glyph, drawn at 1em on the label's baseline.

Data attributes and CSS variables on Citation

Attribute	Values
`data-slot`	`"citation-icon"`

CitedList takes the props of an ol.

Accessibility

The list is an ol, so a screen reader announces each point's number and the count.
The citations come after the sentence with a space before them, so the sentence reads whole before its sources. The icon is hidden; the label (or aria-label) names the chip.
A long label is cut with an ellipsis; pass title when the full name matters.

Key	Action
`Tab`	Move to the next citation
`Enter`	Open the cited source
`Enter` / `Space`	Press a citation `button`

Contract	States tested
Behaviour	`default`, `with-citations`, `no-citations`, `rendered-as-button`
Accessibility	`semantic-html`, `labeled`, `browser-accessibility-test`
Visual	`default`, `hover`, `focus`, `truncated`

Do / Don't

Cite each point with the sources it rests on, and render a citation as the app's router link or a play button through render.

Don't

Glue a citation to the sentence's last word, or draw a local source pill in app code.

On this page