Sources

A counted native disclosure of application-supplied references, descriptions and supporting quotes.

Preview

Sources (2)
  1. Project brief

    Example source · Scope and owners

    Every decision has an owner and a next step.
  2. Review notes

    Example source · Review schedule

    Review the draft together on Thursday.

In action

Keep references beside the answer

Sources (2)
  1. Project brief

    Example source · Scope and owners

    Every decision has an owner and a next step.
  2. Review notes

    Example source · Review schedule

    Review the draft together on Thursday.

A native disclosure counts the supplied references and presents their descriptions and quotes. These example.com links are illustrative source records.

When to use

Use it for

  • Present the references an application used to support an answer.
  • Supply stable ids, titles, URLs and optional descriptions or exact source quotes.
  • The native disclosure composes Refs and RefItem. Use open/onToggle or defaultOpen for disclosure state.
  • Web URLs and document-relative links are accepted; executable schemes are not rendered as links.
  • Links open a new tab with opener isolation. CSS-only markup retains native disclosure and link behavior.

Avoid

  • Presenting an unverified model-generated URL as an independently checked source.
  • Fetching sources or inferring quotations inside the component.

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 { Sources } from "@noorddev/vlak-react";

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

Copy the source

npx @noorddev/vlak-cli add sources

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/sources.json

Installs the same source through the shadcn CLI.

React

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

<Sources defaultOpen sources={[
  { id: "brief", title: "Project brief", url: "https://example.com/brief", description: "Scope and owners", quote: "Every decision has an owner." },
]} />

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

Props

sourceHref (function)

External web addresses and document-relative references; executable URL schemes are omitted.

Sources

A counted native disclosure of application-supplied source links and optional quotes.

PropTypeDefaultDescription
sourcesrequiredreadonly CitationSource[]
labelstring"Sources"
defaultOpenbooleanfalse

Also accepts Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title">.

The ref reaches HTMLDetailsElement.

Keyboard

KeysDoes
TabReaches the source summary and visible reference links
Enter, SpaceOpens or closes the native source disclosure
Enter on a linkOpens the chosen reference in a new tab

Accessibility

  • The summary includes the number of supplied references. An ordered list preserves source order and optional blockquotes identify quoted text.
  • Source links have 44px minimum height and identify new-tab behavior in their accessible name.
  • Native details attributes and its 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";
<details class="rs-sources rs-disclosure"><summary class="rs-disclosure-summary">Sources (1)</summary><ol class="rs-refs rs-sources-list"><li class="rs-cite-item"><a class="rs-sources-link" href="https://example.com/brief" target="_blank" rel="noopener noreferrer">Project brief</a></li></ol></details>

Classes

.rs-sources.rs-sources-list.rs-sources-link.rs-sources-description.rs-sources-quote.rs-sources-empty

Depends on

CollapsibleReferences

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas