Skip to content

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*ReactNodeThe content, duh.-
as
enum
The root element.p
size10 | 12 | 14 | 16 | 20 | 24 | 32 | 40 | 48The font size.14
lineHeight12 | 16 | 20 | 24 | 32 | 40 | 48 | 56The line height.-
weight100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900The font weight.-
transform"capitalize" | "uppercase" | "lowercase"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).-
classNamestringThe root class name.-
styleCSSPropertiesThe root element inline 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.

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
  • 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