Text

Display text using well-defined typographic styles.

The Evil Rabbit jumps.

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

Props

Props
Name	Type	Description	Default
as	`enum`	The root element to render the text as. Can be one of: 'blockquote', 'div', 'dt', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'p', 'q', 'small', 'span', 'strong', or 'label'. Defaults to 'p'.	`p`
children	`ReactNode`	The content of the Text component.	-
size	`ResponsiveProp<Size>`	The font size of the text. Can be 10, 12, 13, 14, 16, 20, 24, 32, 40, or 48. Defaults to 14.	`14`
weight	`100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900`	The font weight of the text. Can be 100, 200, 300, 400, 500, 600, 700, 800, or 900. Defaults to a value based on the font size.	-
transform	`"capitalize" \| "uppercase" \| "lowercase" \| "initial" \| "none"`	The text transform of the text. Can be 'capitalize', 'uppercase', 'lowercase', 'initial' or 'none'.	-
align	`"left" \| "center" \| "right"`	The text alignment of the text. Can be 'left', 'center', or 'right'.	-
color	`enum`	The text color of the text. Can be one of the colors in the design system, or 'inherit'. Defaults to 'geist-foreground'.	`gray-1000`
lineHeight	`12 \| 14 \| 16 \| 20 \| 24 \| 32 \| 40 \| 48 \| 56`	The line height of the text. Can be 12, 14, 16, 20, 24, 32, 40, 48, or 56. Defaults to a value based on the font size.	-
truncate	`number \| boolean`	Whether to truncate the text. If true, the text will be truncated to a single line. If a number is provided, the text will be truncated to the specified number of lines. If false or undefined, the text will wrap normally. Defaults to true.	-
className	`string`	Additional class name(s) to apply to the Text component.	-
style	`CSSProperties`	Additional inline styles to apply to the Text component.	-
title	`string`	If text is `truncated`, this should be the full text.	-
monospace	`boolean`	Whether to use the monospace font for the text. Defaults to false.	`false`
id	`string`	The ID of the root element.	-
wrap	`boolean`	Whether the text should wrap lines. Defaults to true.	`true`
dangerouslySetInnerHTML	`{ __html: string; }`	The HTML string to use for dangerously setting the innerHTML of the Text component. Only use this when absolutely necessary, and ensure that the string is safe to render.	-
htmlFor	`string`	The value of the `htmlFor` attribute to use when the `as` prop is set to 'label'.	-

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

Align

The Evil Rabbit jumps.

Code Editor

Monospace Font

This is a sans-serif font.

This is a monospace font.

Code Editor

Unordered List

Static websites and static generators (React, Vue, Angular, etc)
Code that renders HTML on the server-side
API endpoints that query databases or web APIs and return dynamic data

Code Editor

Ordered List

Push a commit to trigger the deployment.
You'll see the deployment status on GitHub and Vercel dashboard.

Code Editor

Code

It’s a matter of running vercel to get it up and running instantly.

Code Editor

Codeblock

npm i vercel -g
vercel init nextjs
Code Editor

Text

Display text using well-defined typographic styles.

Props

Sizes

Responsive

Weights

Color

Modifiers

Polymorphic

Truncate

Clamp

Align

Monospace Font

Unordered List

Ordered List

Code

Codeblock