Quote

An inline quotation component rendered as a native q element. Automatically adds quotation marks via CSS.

View component changelog

preview

To be or not to be, that is the question.The only way to do great work is to love what you do.

React
"use client"

import Quote from "@radui/ui/Quote"

const QuoteExample = () => {
    return (
        <div className="flex flex-col gap-4">
            <Quote>To be or not to be, that is the question.</Quote>
            <Quote>The only way to do great work is to love what you do.</Quote>
        </div>
    )
}

export default QuoteExample

API Documentation

Anatomy

Import all parts of the component and piece them together

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

export default () => {
    return <Quote>Your quote here.</Quote>
}

Quote

An inline quotation rendered as a native q element.

Prop	Type	Default	Description
truncate	boolean	false	Truncates overflowing text with an ellipsis. Sets data-truncate on the element.
customRootClass	string	""	Overrides the Theme classNamespace for this component only.
className	string	""	Additional CSS classes applied to the element.

Truncate

preview

The only way to do great work is to love what you do. If you haven't found it yet, keep looking.

React
"use client"

import Quote from "@radui/ui/Quote"

const QuoteTruncate = () => {
    return (
        <div className="flex flex-col gap-6 max-w-sm">
                <Quote truncate>The only way to do great work is to love what you do. If you haven't found it yet, keep looking.</Quote>
        </div>
    )
}

export default QuoteTruncate

Edit this page on GitHub →