Blockquote
Blockquote
Styled quote blocks with optional citation
Installation
Install the component using the CLI:
npx mdx-ui add blockquoteUsage
Import and use the component in your MDX files:
import { Blockquote } from "@/components/mdx/blockquote";
<Blockquote>This is a blockquote</Blockquote>;Examples
Simple Blockquote
A basic blockquote without citation.
Make it work, make it right, make it fast.
Premature optimization is the root of all evil.
With Citation
Add a citation to attribute the quote to someone.
The best way to predict the future is to invent it.
<Blockquote cite="Alan Kay">
The best way to predict the future is to invent it.
</Blockquote>Long Quote
Blockquote with multiple paragraphs.
Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work.
And the only way to do great work is to love what you do.
<Blockquote cite="Steve Jobs">
Your work is going to fill a large part of your life, and the only way to be
truly satisfied is to do what you believe is great work. And the only way to
do great work is to love what you do.
</Blockquote>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The quote content |
cite | string | - | Optional citation/author name |
className | string | - | Additional CSS classes |