Blockquote
A styled <blockquote> element with an optional icon, citation source, accent color, and configurable corner radius. Useful for testimonials, pull quotes, and editorial callouts.
Default
Imagination is more important than knowledge.— Albert Einstein
<Blockquote cite="— Albert Einstein">
Imagination is more important than knowledge.
</Blockquote>With accent color
A blue accented quote.— Author
A violet accented quote.— Author
A green accented quote.— Author
<Blockquote color="blue" cite="— Author">A blue accented quote.</Blockquote>
<Blockquote color="violet" cite="— Author">A violet accented quote.</Blockquote>
<Blockquote color="green" cite="— Author">A green accented quote.</Blockquote>With icon
The best way to predict the future is to invent it.— Someone wise
<Blockquote icon="❝" iconSize={24} cite="— Someone wise">
The best way to predict the future is to invent it.
</Blockquote>With radius
Rounded corners on the blockquote container.
<Blockquote radius="lg" color="orange">
Rounded corners on the blockquote container.
</Blockquote>Props
| Prop | Type | Default | Description |
|---|---|---|---|
cite | ReactNode | — | Citation source rendered below the quote |
color | string | — | Accent color applied to the left border and background |
icon | ReactNode | — | Icon element displayed at the top of the blockquote |
iconSize | string|number | — | Size of the icon in pixels or any CSS length |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border radius of the container |
textWrap | 'wrap'|'nowrap'|'balance'|'pretty'|'stable' | — | Controls how quote text wraps |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |
children | ReactNode | — | Quote content |