labsUI

Quote

Semantic figure, blockquote and figcaption. Plain, card and large variants, with author, subtitle, avatar, lang, typewriter and textSwap.

npx @kznlabs/labsui add quote
Lithuania, my country, thou art like health; how much thou shouldst be prized only he can learn who has lost thee.
Adam MickiewiczPan Tadeusz, Book I · tr. G. R. Noyes
Born in slavery and chained in my swaddling bands, I have had but one such spring in my whole life.
Adam MickiewiczPan Tadeusz, Book XI · tr. G. R. Noyes
O spring! Happy is he who beheld thee then in our country!
Adam MickiewiczPan Tadeusz · tr. G. R. Noyes, 1917

<Quote>

Semantic quote: figure, blockquote and figcaption. Fades in on a spring when it scrolls into view. Supports typewriter and textSwap.

  • children*
    ReactNode

    The quoted text; plain strings work with typewriter.

  • author
    string

    Who said or wrote it.

  • avatar
    ReactNode

    Avatar slot, e.g. <Avatar size="sm" alt="Jane Doe" />.

  • lang
    string

    Language of the quoted text, e.g. "pl": correct screen-reader pronunciation and SEO.

  • subtitle
    string

    Secondary line under the author, e.g. job title.

  • textSwap
    readonly string[] | { items: readonly string[]; interval?: number | undefined; direction?: "down" | "fade" | "up" | undefined; }

    Cycles through an array of quotes with spring text swap transitions.

  • typewriter
    boolean | { speed?: number | undefined; delay?: number | undefined; cursor?: boolean | undefined; }

    Enables typewriter effect for string children, or pass custom speed/delay options.

  • variantdefault "plain"
    "plain" | "card" | "large"

    "plain" text, "card" surface, or "large" display text with an accent mark.

PropTypeDefault
children*

The quoted text; plain strings work with typewriter.

ReactNode—
author

Who said or wrote it.

string—
avatar

Avatar slot, e.g. <Avatar size="sm" alt="Jane Doe" />.

ReactNode—
lang

Language of the quoted text, e.g. "pl": correct screen-reader pronunciation and SEO.

string—
subtitle

Secondary line under the author, e.g. job title.

string—
textSwap

Cycles through an array of quotes with spring text swap transitions.

readonly string[] | { items: readonly string[]; interval?: number | undefined; direction?: "down" | "fade" | "up" | undefined; }—
typewriter

Enables typewriter effect for string children, or pass custom speed/delay options.

boolean | { speed?: number | undefined; delay?: number | undefined; cursor?: boolean | undefined; }—
variant

"plain" text, "card" surface, or "large" display text with an accent mark.

"plain" | "card" | "large""plain"

* required. Every component also takes className.