Interactive Quote Deck
Quotes with the primary source, context, original wording and attributed sharing. Pro · Content and social › Facts and sources
Quotes that can be checked: each one with the speaker, the primary source (and the moment in a recording), the context around it and the original wording of a translation. Sharing copies the quote together with its source, never the words alone.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add interactive-quote-decknpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { InteractiveQuoteDeck } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
quotes * | DeckQuote[] | Quotes in reading order, each with its speaker and primary source. | |
active | number | Index of the quote shown. | |
defaultActive | number | 0 | Initial quote when uncontrolled. Default 0. |
onActiveChange | (index: number) => void | Called when the reader moves to another quote. | |
onShare | (quote: DeckQuote, method: QuoteShareMethod) => void | Called after a share action, e.g. for analytics. | |
shareUrl | string | Base of the permalink copied by "Copy link" (#quote-<id> is appended). Default: the page address. | |
loading | boolean | false | Data is loading: skeleton. |
error | ReactNode | Loading failed: shown instead of the deck. | |
title | ReactNode | Heading above the deck. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3). |
timeZone | string | IANA time zone of source dates (default: the ThemeProvider's, then the reader's). | |
locale | string | BCP 47 locale for dates; defaults to the ThemeProvider's. | |
labels | Partial<InteractiveQuoteDeckLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Citation Evidence Lens — Highlights claims by how well they are supported, with sources for each
- Source Dossier — Source dossier: verification status, linked facts, source types, print
- Correction Ledger — Correction history: what changed, when and why, with a word-level diff
- Article Header — Article header: section, headline, lede, authors and date
- Byline — Byline: authors, published and updated dates, reading time
- Article Figure — Image with caption and photo credit
- Pull Quote — Pull quote with attribution
- Key Points — “Key points” summary block
- Editor Note — Update, correction, disclosure and sponsored-content notes
- Article Toc — Article table of contents that tracks the current section
- Reading Progress — Reading progress bar
- Share Bar — Share: Telegram, VK, X, WhatsApp, email and copy link
Previous: Correction Ledger · Next: Post Card · All Content and social