Blockquote React component
A quote with its author: a rule on the left, a large quotation mark, a framed card or a big centred pull quote, revealed as it scrolls into view with a highlighter sweeping across the phrase that matters.
When to use the Blockquote component
Use Blockquote for testimonials, quotes in articles and case studies, and pull quotes that break up long pages. The highlight draws the eye to the one phrase you want people to remember.
Use the card style in grids of testimonials, the bar style inside running text, and pull for a single statement between sections.
Installation
Add the Blockquote component to your project with the shadcn CLI. It lands in components/blockquote.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/blockquote.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<Blockquote /> accepts 11 props, all optional.
| Prop | Type | Default |
|---|---|---|
| children The quote. A string can have a phrase marked with highlight. | React.ReactNode | "The best interfaces disappear. People shouldn't notice the tool, only that the work got … |
| author | string | "Maya Chen" |
| role | string | "Head of Design, Northwind" |
| avatar Author photo URL; initials are used when it's missing. | string | — |
| cite Source URL, linked from the author line and set as the cite attribute. | string | — |
| variant bar: rule on the left. mark: large quotation mark. card: framed. pull: large and centred. | "bar" | "mark" | "card" | "pull" | "bar" |
| highlight A phrase inside the quote to mark with a highlighter sweep. | string | "only that the work got easier" |
| accent Colour of the bar, mark and highlight. | string | — |
| animateIn Play the reveal the first time the quote scrolls into view. | boolean | true |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- children
The quote. A string can have a phrase marked with highlight.
React.ReactNodeDefault: "The best interfaces disappear. People shouldn't notice the tool, only that the work got … - authorstringDefault: "Maya Chen"
- rolestringDefault: "Head of Design, Northwind"
- avatar
Author photo URL; initials are used when it's missing.
string - cite
Source URL, linked from the author line and set as the cite attribute.
string - variant
bar: rule on the left. mark: large quotation mark. card: framed. pull: large and centred.
"bar" | "mark" | "card" | "pull"Default: "bar" - highlight
A phrase inside the quote to mark with a highlighter sweep.
stringDefault: "only that the work got easier" - accent
Colour of the bar, mark and highlight.
string - animateIn
Play the reveal the first time the quote scrolls into view.
booleanDefault: true - theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- How do I highlight part of the quote?
- Pass the quote as text and set highlight to a phrase that appears in it. A marker sweeps under that phrase when the quote comes into view, even across line breaks.
- Is the source linked?
- Set cite to the source URL. It becomes the blockquote's cite attribute and the author's name links to it.
- When does the animation play?
- Once, the first time 40% of the quote is on screen. Set animateIn={false} to show it straight away; reduced motion shows the final state.
