Components
Citation
Unstable: a numbered link after a claim in an AI answer, to the source behind it. Its accessible name says "Source 1: …", not just "1". Import it from @nizivo/react/unstable/citation.
Examples
Basic
Numbered sources after the claims they support.
import type { JSX } from 'react';
import { Citation } from '@nizivo/react/unstable/citation';
export function CitationExample(): JSX.Element {
return (
<p style={{ margin: 0, maxInlineSize: 420 }}>
Orders are up 8.1% on last week{' '}
<Citation number={1} href="#source-1" title="Moss & Kiln sales report" />, mostly from
wholesale <Citation number={2} href="#source-2" title="Autumn restock: what sold out first" />
.
</p>
);
}
Import
import { Citation } from '@nizivo/react/unstable/citation';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/citation.css';Static or interactive
Server. No client JavaScript: it is a link. How to choose.
Linking
number is the source's number as the answer counts them, and href where it is: #source-1 for a
SourceCard under the answer (give the card that id), or the
source's own URL. title adds the source's title to the accessible name: "Source 1: Moss & Kiln
sales report". labels.source and labels.sourceTitled change those words.
Not yet
The design also shows the source in a popover when the citation is hovered or focused. That is not built yet; the link goes to the source.
Props
Server component Renders data-slot="citation" with the class nz-citation. Props: CitationProps. Source: src/unstable/citation/citation.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
hrefrequired | string | – | Where the source is: |
labels | Partial<CitationLabels> | – | |
locale | string | 'en-US' | BCP 47 tag for the number. |
numberrequired | number | – | The source's number, from 1, as the answer counts its sources. |
render | RenderProp<Record<string, never>> | – | Must render an |
title | string | – | The source's title, for the accessible name. |
- Also takes every attribute of
<a>exceptchildren;href,titleare redeclared above. (Omit<ComponentPropsWithRef<"a">, "children">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
CitationLabelstypeimport type { CitationLabels } from '@nizivo/react/unstable/citation'Citation's own strings (§16.4): serialisable, English defaults.
Name Type Default Description sourcerequiredstring'Source {number}'The accessible name without a
title:{number}.sourceTitledrequiredstring'Source {number}: {title}'The accessible name with a
title:{number}and{title}.CitationPropstypeimport type { CitationProps } from '@nizivo/react/unstable/citation'The props of
Citation, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
citation.nz-citation | Citationroot (takes render); interactive, focus: self | none |
citation-number.nz-citation-number | Citationinner element (CSS only) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
| Hook | Default | Read as |
|---|---|---|
--nz-citation-bg | --nz-bg-muted |
|
Layers: nz.components. Classes: .nz-citation, .nz-citation-number.
Tokens this stylesheet reads (8)
--nz-bg-muted, --nz-bg-pressed, --nz-font-label-s, --nz-radius-xs, --nz-space-0-5, --nz-space-1-5, --nz-text-primary, --nz-text-secondary
Accessibility
These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:
citation: draws the focus outline itself on keyboard focus.
Keyboard
To be written.
ChoiceCard
A choice drawn as cards, such as a saved payment method or a delivery speed. Each ChoiceCard is a label around a real, visible native radio, with slots for a leading mark (a card brand), a second line and trailing content such as a "Default" Badge. ChoiceCardGroup is the radio group; inside a Field, give the Field group, and its error marks the chosen card invalid.
CodeBlock
Unstable: copyable code on a dark surface, a shell command per package manager or a snippet per language, with tabs and a Copy button. Import it from @nizivo/react/unstable/code-block.