References

Connects inline citations to a numbered source list and cite box. Numerals hang in the gutter.

Preview

Set in a single ink.¹

Müller-Brockmann, J. Grid systems in graphic design.

In action

Ref

Set in a single ink.¹

Müller-Brockmann, J. Grid systems in graphic design.

When to use

Use it for

Articles and papers with numbered citations and a reference list.
CiteBox for the how-to-cite block at the end.

Not for

Footnotes with long asides; keep notes short.
Link lists; use plain Links.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Cite, CiteBox, CiteBoxLabel, CiteBoxText, CiteLink, RefAuthors, RefDoi, RefItem, Refs } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/references.

2. Vendor the source

npx @noorddev/vlak-cli add references

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/references.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Cite, CiteBox, CiteBoxLabel, CiteBoxText, CiteLink, RefAuthors, RefDoi, RefItem, Refs } from "@noorddev/vlak-react";

<p>Set in a single ink.<Cite><CiteLink href="#ref-1">1</CiteLink></Cite></p>

<Refs>
  <RefItem id="ref-1">
    <RefAuthors>Müller-Brockmann, J.</RefAuthors> Grid systems in graphic design. <RefDoi href="https://niggli.ch/grid">niggli.ch/grid</RefDoi>
  </RefItem>
</Refs>

<CiteBox>
  <CiteBoxLabel>Cite this</CiteBoxLabel>
  <CiteBoxText>Valdés-Olmos, R. (2026). Vlak. Noord.</CiteBoxText>
</CiteBox>

Props

Cite

Inline superscript citation.

Also accepts HTMLAttributes<HTMLElement>.

CiteBox

Also accepts HTMLAttributes<HTMLDivElement>.

CiteBoxLabel

Also accepts HTMLAttributes<HTMLDivElement>.

CiteBoxText

Also accepts HTMLAttributes<HTMLDivElement>.

CiteLink

Also accepts AnchorHTMLAttributes<HTMLAnchorElement>.

RefAuthors

Also accepts HTMLAttributes<HTMLSpanElement>.

RefDoi

Also accepts AnchorHTMLAttributes<HTMLAnchorElement>.

RefItem

Also accepts LiHTMLAttributes<HTMLLIElement>.

Refs

Numbered 1px list. Numerals hang in the gutter.

Also accepts OlHTMLAttributes<HTMLOListElement>.

Keyboard

Keys	Does
`Tab`	Moves between citation links
`Enter`	Jumps to the reference

Accessibility

Cite is a <sup> holding a native <a>; give each RefItem the id the link targets. Refs is an <ol>, so the numbering is real.

Markup

<p>Set in a single ink.<sup class="rs-cite"><a href="#ref-1">1</a></sup></p><ol class="rs-refs"><li id="ref-1"><span class="rs-ref-authors">Müller-Brockmann, J.</span> Grid systems in graphic design. <a class="rs-ref-doi" href="#">niggli.ch/grid</a></li></ol>

Classes

.rs-cite.rs-refs.rs-ref-authors.rs-ref-doi.rs-cite-box.rs-cite-box-label.rs-cite-box-text.rs-cite-cite-a.rs-cite-item