Skip to content

Text

Display text using well-defined typographic styles.

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.

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
childrenReactNodeThe content of the Text component.-
sizeResponsiveProp<Size>The font size of the text. Can be 10, 12, 13, 14, 16, 20, 24, 32, 40, or 48. Defaults to 14.14
weight100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900The 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
lineHeight12 | 14 | 16 | 20 | 24 | 32 | 40 | 48 | 56The 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.-
truncatenumber | booleanWhether 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.-
classNamestringAdditional class name(s) to apply to the Text component.-
styleCSSPropertiesAdditional inline styles to apply to the Text component.-
titlestringIf text is `truncated`, this should be the full text.-
monospacebooleanWhether to use the monospace font for the text. Defaults to false.false
idstringThe ID of the root element.-
wrapbooleanWhether 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.-
htmlForstringThe value of the `htmlFor` attribute to use when the `as` prop is set to 'label'.-

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

The Evil Rabbit jumps.

Code Editor

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

The Evil Rabbit jumps.

Code Editor

The Evil Rabbit jumpsover the quick brown fox Lawful Meerkat.

Code Editor

<p> semantically, <h2> visually.

Code Editor

The Evil Rabbit jumps.

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

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

Code Editor

This is a sans-serif font.

This is a monospace font.

Code Editor
  • 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
  1. Push a commit to trigger the deployment.
  2. You'll see the deployment status on GitHub and Vercel dashboard.
Code Editor

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

Code Editor
npm i vercel -g
vercel init nextjs
Code Editor