Quote
Quote shows an attributed quotation: a testimonial, an excerpt from a document or a statement in an article.
Quote uses standard semantics: a <figure> holding a <blockquote cite> and a <figcaption> (author, <cite> source), so screen readers announce a quotation and who said it. Three appearances: default (brand bar at the start), subtle (neutral bar, for body text) and emphasis (large text with quotation marks, for testimonials). The bar uses border-s, so it switches sides in RTL.
Since we moved to Yugen UI, our team ships new screens twice as fast and still meets contrast requirements.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Quote } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Neutral colors form the foundation; brand color highlights what matters.
Don't cover large areas with brand color; don't use brand color for body text.
A library where dark mode, RTL and screen readers all work right from the start.
Appearance & source
default with a source link (cite), subtle at size small, emphasis with an avatar.
Usage
Do
- Name the author or source. A quote without one is hard to trust.
- Use emphasis for testimonials on landing pages; default / subtle in articles.
- Pass the URL to cite when quoting a page on the web.
Don't
- Don't use Quote just to indent or highlight a paragraph. Use MessageBar or Card.
- Don't place several emphasis Quotes next to each other in one view.
Props
| Prop · Type | Default | Description |
|---|---|---|
| childrenReactNode | Default: — | Quoted content; a string is wrapped in a <p>. |
| authorReactNode | Default: — | Speaker or author. |
| authorTitleReactNode | Default: — | Job title, organization. |
| sourceReactNode | Default: — | Source name, shown in a <cite>. |
| citestring | Default: — | Source URL; set on the blockquote, and it turns source into a link. |
| avatarReactNode | Default: — | Author's avatar. |
| appearance"default" | "subtle" | "emphasis" | Default: "default" | Display style. |
| size"small" | "medium" | "large" | Default: "medium" | Font size of the quote. |