BlockQuote

Name: Rad UI
Author: Rad UI Team

BlockQuote is a component that visually distinguishes quoted content, making it perfect for testimonials, citations, and emphasizing important passages.

"Behind every great man is a woman rolling her eyes." — Jim Carrey

React
import BlockQuote from "@radui/ui/BlockQuote"

const BlockQuoteExample = () => (
    <div className="text-gray-950">
        <BlockQuote color="green">
            "Behind every great man is a woman rolling her eyes." — Jim Carrey
        </BlockQuote>
    </div>
)

export default BlockQuoteExample;

Features

Multiple size options: small, medium, large, x-large
Customizable with different color themes
Clean and simple styling for emphasized quotes
Follows typography best practices
Perfect for testimonials and citations

Sizes

"Behind every great man is a woman rolling her eyes." — Jim Carrey

React
import BlockQuote from '@radui/ui/BlockQuote';

const BlockQuoteSizes = () => {
    const sizes = ['small', 'medium', 'large', 'x-large'];

    return <div className='flex flex-col gap-4'>

                {sizes.map((size, index) => {
                    return <BlockQuote key={index} size={size} >
                        <span className='text-gray-950'>"Behind every great man is a woman rolling her eyes." — Jim Carrey</span>
                        </BlockQuote>
                })}
            </div>

}

export default BlockQuoteSizes;

Color

"Behind every great man is a woman rolling her eyes." — Jim Carrey

React
import BlockQuote from '@radui/ui/BlockQuote';


const BlockQuoteColor = () => {
    const sizes = ['small', 'medium', 'large', 'x-large'];
    return <div className='flex flex-col gap-4'>
                {sizes.map((size, index) => {
                    return <BlockQuote key={index} size={size} color='pink'>
                        <span className='text-gray-950'>"Behind every great man is a woman rolling her eyes." — Jim Carrey</span>
                    </BlockQuote>
                })}
            </div>
}

export default BlockQuoteColor;

API Documentation

BlockQuote

A component used to highlight and distinguish quoted content from the surrounding text, often used for testimonials, citations, or emphasis.

Prop	Type	Default
children	ReactNode	--
className	string	''
customRootClass	string	''
variant	string	''
size	string	''
color	string	''