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.

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

Props

Props
Name
Type
Description
Default
childrenReactNodeThe content, duh.-
as
enum
The root element.p
size10 | 12 | 13 | 14 | 16 | 20 | 24 | 32 | 40 | 48The font size.14
lineHeight12 | 14 | 16 | 20 | 24 | 32 | 40 | 48 | 56The line height.-
weight100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900The 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
truncatenumber | booleanTruncate a single or multiple line(s). If you pass truncate, make sure to pass `title` so that the full value is shown on hover.-
classNamestringThe root class name.-
styleCSSPropertiesThe root element inline styles.-
titlestringIf text is `truncated`, this should be the full text.-
wrapbooleanWhether the text should wrap linestrue
dangerouslySetInnerHTML{ __html: string; }See https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml-
monospacebooleanWhether to use the monospace font.false
idstringThe root element id-
htmlForstringThe html for prop available on "labels"-

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