Blockquote

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

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>

API Reference

This component is based on the blockquote element and supports common margin props.

Prop	Type	Default
`asChild`	`boolean`	—
`size`	`Responsive<enum>`	—
`weight`	`Responsive<"light" \| "regular" \| "medium" \| "bold">`	—
`color`	`enum`	—
`highContrast`	`boolean`	—
`truncate`	`boolean`	—
`wrap`	`Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">`	—

Examples

Size

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.

<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>

Weight

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.

<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>

Color

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.

<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>

High-contrast

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.

<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>

Truncate

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>