Inline citation

A quiet inline source trigger opening a counted, keyboard-navigable preview with links, descriptions and quotes.

Preview

The brief names an owner and next step for every decision.

In action

Inspect the sources behind a claim

The brief names an owner and next step for every decision.

Open the quiet source trigger, then move between references with the arrow buttons or keyboard. The dialog shows its position, a description, and the supplied quote. Escape returns to the claim.

When to use

Use it for

Attach one or more application-supplied sources to a specific claim.
The count and quote change as the reader navigates sources; index/onIndexChange can make source selection application-owned.
Use open/onOpenChange or defaultOpen for preview state. Empty source arrays disable the trigger.
The preview is portaled outside the text paragraph, follows the trigger and stays inside the viewport.
CSS-only markup provides a named trigger; opening, focus and source navigation require React or application code.

Avoid

Hiding citations behind pointer-only hover behavior.
Treating a source card as proof that the application verified the linked content.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { InlineCitation } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/inline-citation.

Copy the source

npx @noorddev/vlak-cli add inline-citation

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/inline-citation.json

Installs the same source through the shadcn CLI.

React

import { InlineCitation } from "@noorddev/vlak-react";

<p>The brief names an owner for every decision. <InlineCitation sources={[
  { id: "brief", title: "Project brief", url: "https://example.com/brief", quote: "Every decision has an owner." },
  { id: "notes", title: "Review notes", url: "https://example.com/notes", description: "The next review" },
]} /></p>

See the integration example to compose these components with your application's model and data.

Props

InlineCitation

A keyboard-reachable source preview with count, quotes and navigation through multiple citations.

Prop	Type	Default
`sources`required	`readonly CitationSource[]`
`label`	`string`
`open`	`boolean`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`
`index`	`number`
`defaultIndex`	`number`	`0`
`onIndexChange`	`(index: number) => void`

Also accepts HTMLAttributes<HTMLSpanElement>.

The ref reaches HTMLSpanElement.

Keyboard

Keys	Does
`Enter, Space`	Opens the source dialog or activates its focused control
`Arrow Left, Arrow Right`	Moves through sources, following text direction
`Home, End`	Moves to the first or last source
`Escape`	Closes the preview and restores trigger focus
`Tab, Shift+Tab`	Moves through preview controls and returns to document focus order at its boundaries

Accessibility

The 44px trigger exposes its source count, dialog relationship and expanded state.
The nonmodal dialog receives focus on open. Its source position uses a status region; boundary navigation remains focusable with aria-disabled.
Close and Escape restore trigger focus; outside interaction dismisses without stealing focus.
Links identify new-tab behavior. Native span attributes, class/style and the span ref are forwarded.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<span class="rs-inline-citation">Read the brief<button class="rs-btn-subtle rs-btn-sm rs-inline-citation-trigger" type="button" aria-label="View 2 sources" aria-haspopup="dialog" aria-expanded="false">[2]</button></span>

Classes

.rs-inline-citation.rs-inline-citation-trigger.rs-inline-citation-panel.rs-inline-citation-header.rs-inline-citation-navigation.rs-inline-citation-count.rs-inline-citation-title.rs-inline-citation-link.rs-inline-citation-description.rs-inline-citation-quote

Depends on

Button Icons Sources

Use elsewhere

Markdown reference Registry JSON Source AI integration guide