# Blockquote (/components/typography/blockquote)



`Blockquote` quotes another source as a block. It renders a native `blockquote` element, which
conveys quotation semantics to assistive technology.

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

```tsx
import { Blockquote } from '@luke-ui/react/blockquote';

export default () => {
	return (
		<Blockquote>
			This passage is set apart from the surrounding text because it comes from another source.
		</Blockquote>
	);
};
```

## Typography [#typography]

`Blockquote` accepts the `typography`, `fontWeight`, and `lineClamp` props from
[Text](/components/typography/text). Pass `typography` when the quotation needs a different style
from the default.

apps/docs/src/examples/blockquote/typography.tsx

```tsx
import { Blockquote } from '@luke-ui/react/blockquote';

export default () => {
	return <Blockquote typography="lead">A quoted passage set at the lead size.</Blockquote>;
};
```

## Related components [#related-components]

Use [Quote](/components/typography/quote) for a short quotation inside a sentence.

## API [#api]

<ComponentPropsTable
  id="type-table-blockquote.tsx-BlockquoteProps"
  type="{
  &#x22;id&#x22;: &#x22;blockquote.tsx-BlockquoteProps&#x22;,
  &#x22;name&#x22;: &#x22;BlockquoteProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for the `Blockquote` component.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;name&#x22;: &#x22;render&#x22;,
      &#x22;description&#x22;: &#x22;Overrides the default DOM element with a custom render function.\nThis allows rendering existing components with built-in styles and behaviors\nsuch as router links, animation libraries, and pre-styled components.\n\nRequirements:\n\n- You must render the expected element type (e.g. if `<button>` is expected, you cannot render an\n  `<a>`).\n- Only a single root DOM element can be rendered (no fragments).\n- You must pass through props and ref to the underlying DOM element, merging with your own prop\n  as appropriate.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;DOMRenderFunction<any, any> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;DOMRenderFunction<any, any>&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;fontStyle&#x22;,
      &#x22;description&#x22;: &#x22;Sets font style.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'default'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;inherit\&#x22; | \&#x22;normal\&#x22; | \&#x22;default\&#x22; | \&#x22;italic\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;fontVariantNumeric&#x22;,
      &#x22;description&#x22;: &#x22;Sets numeric glyph style.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'default'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;normal\&#x22; | \&#x22;default\&#x22; | \&#x22;diagonal-fractions\&#x22; | \&#x22;ordinal\&#x22; | \&#x22;slashed-zero\&#x22; | \&#x22;tabular-nums\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;fontWeight&#x22;,
      &#x22;description&#x22;: &#x22;Sets the semantic font-weight role. When omitted, the selected typography style supplies its\nweight.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;\&#x22;heading\&#x22; | \&#x22;label\&#x22; | \&#x22;body\&#x22; | \&#x22;emphasis\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;isVisuallyHidden&#x22;,
      &#x22;description&#x22;: &#x22;Hides text visually while keeping it accessible.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;false&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#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;shouldDisableTrim&#x22;,
      &#x22;description&#x22;: &#x22;Turns cap-height trim on or off. When omitted, trimming is disabled for inline or unknown\nelement types. Line clamp always disables trim.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;shouldInheritFont&#x22;,
      &#x22;description&#x22;: &#x22;Makes text inherit its surrounding font and colour styles.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;false&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;boolean | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;textAlign&#x22;,
      &#x22;description&#x22;: &#x22;Sets text alignment.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'start'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;center\&#x22; | \&#x22;end\&#x22; | \&#x22;start\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;textDecoration&#x22;,
      &#x22;description&#x22;: &#x22;Sets text decoration.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'none'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;none\&#x22; | \&#x22;inherit\&#x22; | \&#x22;line-through\&#x22; | \&#x22;underline\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;textTransform&#x22;,
      &#x22;description&#x22;: &#x22;Sets text transform.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'none'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;none\&#x22; | \&#x22;inherit\&#x22; | \&#x22;default\&#x22; | \&#x22;capitalize\&#x22; | \&#x22;lowercase\&#x22; | \&#x22;uppercase\&#x22; | 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;name&#x22;: &#x22;typography&#x22;,
      &#x22;description&#x22;: &#x22;Applies a complete typography style: family, size, weight, line height, letter spacing, and\ntrim.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'body'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;caption\&#x22; | \&#x22;label\&#x22; | \&#x22;body\&#x22; | \&#x22;lead\&#x22; | \&#x22;heading4\&#x22; | \&#x22;heading3\&#x22; | \&#x22;heading2\&#x22; | \&#x22;heading1\&#x22; | \&#x22;display\&#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;`BlockquoteProps` 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;
    }
  ]
}"
/>