Content blocks

Quote

The quote block: a 3px bar in the current text color, with text starting 33px in.

Make it work, make it right, make it fast.

Usage

  • Use Quote for quoted speech, testimonials or excerpts from another source.
  • Use the large size for a single pull quote that should stand out.
  • Don’t use Quote for notes, tips or warnings; use Callout instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/QuoteExample.tsx
import { BlockContent, Quote, rt } from '@krackedui/motion';

export function QuoteExample() {
  return (
    <BlockContent>
      <Quote text={rt('Make it work, make it right, make it fast.')} />
    </BlockContent>
  );
}

Examples

Large

Large quote size (1.2em).

A larger quote for emphasis.

Color

The bar uses currentColor, so a text color recolors both.

Blue quote
Quote on a gray background

With children

First line of the quote.
A nested paragraph inside the quote.

API Reference

Quote

Based on <div> and supports its props; renders a <blockquote>. Adds:

PropTypeDefault
text
RichText
renderLeaf
LeafRenderer
color
BlockColor
"default"
large
boolean
false
children
ReactNode

Accessibility

  • Renders a native <blockquote>.
  • Placeholder “Empty quote” when edited.
© 2026 Motion. Internal documentation.