Text

Display text using well-defined typographic styles.

Note: This component is a work in progress. It is not being fully used across Vercel products.

Props

Props
Name	Type	Description	Default
children	`ReactNode`	The content, duh.	-
as	`enum`	The root element.	`p`
size	`10 \| 12 \| 13 \| 14 \| 16 \| 20 \| 24 \| 32 \| 40 \| 48`	The font size.	`14`
lineHeight	`12 \| 14 \| 16 \| 20 \| 24 \| 32 \| 40 \| 48 \| 56`	The line height.	-
weight	`100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900`	The font weight.	-
transform	`"capitalize" \| "uppercase" \| "lowercase" \| "initial"`	Text transform short hand.	-
align	`"left" \| "center" \| "right"`	Text alignment short hand.	-
color	`enum`	The text color. Strictly limited to colors of our design system.	`geist-foreground`
truncate	`number \| boolean`	Truncate a single or multiple line(s). If you pass truncate, make sure to pass `title` so that the full value is shown on hover.	-
className	`string`	The root class name.	-
style	`CSSProperties`	The root element inline styles.	-
title	`string`	If text is `truncated`, this should be the full text.	-
wrap	`boolean`	Whether the text should wrap lines	`true`
dangerouslySetInnerHTML	`{ __html: string; }`	See https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml	-
monospace	`boolean`	Whether to use the monospace font.	`false`
id	`string`	The root element id	-

Weights

The Evil Rabbit jumps. (900)

The Evil Rabbit jumps. (800)

The Evil Rabbit jumps. (700)

The Evil Rabbit jumps. (600)

The Evil Rabbit jumps. (500)

The Evil Rabbit jumps. (400)

The Evil Rabbit jumps. (300)

The Evil Rabbit jumps. (200)

The Evil Rabbit jumps. (100)

Code Editor

Modifiers

The Evil Rabbit jumpsover the ~~quick brown fox~~ Lawful Meerkat.

Code Editor

Polymorphic

<p> semantically, <h2> visually.

Code Editor

The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps.

Code Editor