Citation Mark
Open Source
NewAccessible scholarly citation link with a controlled or uncontrolled fade-only reference popover.
API and behavior
Compound exports, owned slots, interaction law, and family hook routing.
- Required props
hreflabelreference- Optional props
defaultOpen- Controlled props
openonOpenChange- Companion exports
CitationMark- Owned data-slot contract
citation-markcitation-mark-labelcitation-mark-content
Motif route
MOTIF_REGISTRY.citation-mark → apparatusTarget('citation-mark')
Keyboard
Tab focuses; Enter follows the citation link; popover controls support Enter/Space and Escape.
Accessibility
The visible label is a real link and reference content remains available in a labelled popover.
Family hooks
Journal consumes superscript, reference navy, hover underline, and opacity-only motion hooks.
closed citationopen referencelong reference contentInstallation
npx shadcn@latest add @substrateui/citation-mark --yesUpgrading a project that installed base before F1? Refresh the shared hooks first:
npx shadcn@latest add @substrateui/base --yes --overwriteDependencies
npm Dependencies
npm install class-variance-authorityTags
journalcitationreferenceevidence