File: blockquote.md | Updated: 11/15/2025
ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors
Getting started Styling Layout Releases Resources
Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors
Box Flex Grid Container Section
Text Heading Blockquote Code Em Kbd Link Quote Strong
Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip
Accessible Icon Portal Reset Slot Theme Visually Hidden
Components
Block-level quotation from another source.
View source Report an issue View in Playground
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<Blockquote>
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
This component is based on the blockquote element and supports common margin props
.
| Prop | Type | Default |
| --- | --- | --- |
| asChild<br><br>Prop description | boolean | No default value |
| size | Responsive<enum><br><br>See full type | No default value |
| weight | Responsive<"light" \| "regular" \| "medium" \| "bold"> | No default value |
| color<br><br>Prop description | enum<br><br>See full type | No default value |
| highContrast<br><br>Prop description | boolean | No default value |
| truncate<br><br>Prop description | boolean | No default value |
| wrap<br><br>Prop description | Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance"> | No default value |
Use the size prop to control the size.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<Flex direction="column" gap="5">
<Box maxWidth="300px">
<Blockquote size="1">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="350px">
<Blockquote size="2">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="400px">
<Blockquote size="3">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="450px">
<Blockquote size="4">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="500px">
<Blockquote size="5">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="550px">
<Blockquote size="6">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="600px">
<Blockquote size="7">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="650px">
<Blockquote size="8">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="1000px">
<Blockquote size="9">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
</Flex>
Use the weight prop to set the text weight.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<Flex direction="column" gap="3" maxWidth="500px">
<Blockquote weight="regular">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote weight="medium">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote weight="bold">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Flex>
Use the color prop to assign a specific color
.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<Flex direction="column" gap="3" maxWidth="500px">
<Blockquote color="indigo">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote color="cyan">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote color="orange">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote color="crimson">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Flex>
Use the highContrast prop to increase color contrast with the background.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<Flex direction="column" gap="3" maxWidth="500px">
<Blockquote color="gray">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote color="gray" highContrast>
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Flex>
Use the truncate prop to truncate text with an ellipsis when it overflows its container.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<Flex maxWidth="500px">
<Blockquote truncate>
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Flex>
PreviousHeading
NextCode