# Quote

- Page: <https://kznlabs.github.io/labsUI/components/quote>

## Quote (`quote`, component)

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

- Install: `npx @kznlabs/labsui add quote`
- Docs: <https://kznlabs.github.io/labsUI/components/quote>
- Brings: platform, text-swap, typewriter, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<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.
  - `variant?: "plain" | "card" | "large"` = `"plain"`: "plain" text, "card" surface, or "large" display text with an accent mark.

### Usage

```tsx
<Quote variant="card" author="Adam Mickiewicz" subtitle="Pan Tadeusz · tr. G. R. Noyes">Lithuania, my country, thou art like health; how much thou shouldst be prized only he can learn who has lost thee.</Quote>
```

### Example: testimonial.tsx

```tsx
import { Avatar } from "@/components/ui/avatar";
import { Quote } from "@/components/ui/quote";
export function Testimonial() {
  return (
    <Quote
      variant="card"
      author="Adam Mickiewicz"
      subtitle="Pan Tadeusz · tr. G. R. Noyes"
      avatar={<Avatar size="sm" alt="Adam Mickiewicz" />}
      typewriter
    >
      Lithuania, my country, thou art like health; how much thou shouldst be prized only he can learn who has lost thee.
    </Quote>
  );
}
```