# Blockquote

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

```jsx
<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](/themes/docs/overview/layout#margin-props).

| Prop                                                                                                                                                                   | Type                                                      | Default |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------- |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                                                 | —       |
| `size`                                                                                                                                                                 | `Responsive<enum>`                                        | —       |
| `weight`                                                                                                                                                               | `Responsive<"light" \| "regular" \| "medium" \| "bold">`  | —       |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details.                                          | `enum`                                                    | —       |
| `highContrast`Uses a higher contrast color for the component.                                                                                                          | `boolean`                                                 | —       |
| `truncate`Truncates text with an ellipsis. Be aware of [common pitfalls](https://css-tricks.com/flexbox-truncated-text/) in flex layouts.                              | `boolean`                                                 | —       |
| `wrap`Controls the wrapping behavior of the text. See the corresponding [text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) values for details.    | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | —       |

## Examples

### Size

Use the `size` prop to control the size.

```jsx
<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.

```jsx
<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](/themes/docs/theme/color).

```jsx
<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.

```jsx
<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.

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