# Quote (/components/typography/quote)



`Quote` marks a short quotation inside a sentence. It renders a native `q` element, which conveys
quotation semantics to assistive technology and receives the browser's own quotation marks.

apps/docs/src/examples/quote/basic.tsx

```tsx
import { Quote } from '@luke-ui/react/quote';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Text>
			A short phrase can appear as <Quote>quoted material</Quote> within a sentence.
		</Text>
	);
};
```

`Quote` stays inline and inherits the surrounding typography. Use `textWrap` to control wrapping.
Use `lineClamp` to constrain a longer quotation. Use `cite` to give the source URL.

## Related components [#related-components]

Use [Blockquote](/components/typography/blockquote) for a block-length quotation.

## API [#api]

<ComponentPropsTable
  id="type-table-quote.tsx-QuoteProps"
  type="{
  &#x22;id&#x22;: &#x22;quote.tsx-QuoteProps&#x22;,
  &#x22;name&#x22;: &#x22;QuoteProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for the `Quote` component.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;name&#x22;: &#x22;cite&#x22;,
      &#x22;description&#x22;: &#x22;URL of the quoted source.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;lineClamp&#x22;,
      &#x22;description&#x22;: &#x22;Clamps text lines. `true` clamps to 1 line; numeric values clamp to 1–5.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | 2 | 1 | 3 | 4 | 5 | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;textWrap&#x22;,
      &#x22;description&#x22;: &#x22;Sets text wrapping behavior.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'default'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;balance\&#x22; | \&#x22;default\&#x22; | \&#x22;pretty\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`QuoteProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>