Text

Display text using well-defined typographic styles.

Props

Name
Type
Description
Default
children
ReactNode
The content, duh.
-
as
enum
The root element.
p
size
10 | 12 | 14 | 16 | 20 | 24 | 32 | 40 | 48
The font size.
14
lineHeight
12 | 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 the ∆ 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 stlyes.
-
title
string
If text is `truncated`, this should be the full text.
-
wrap
boolean
Whether the text should wrap lines
true
dangerouslySetInnerHTML
{__html: string}
-

Sizes

TODO: Swap Container with Stack

Code Editor
<Container>

  <Text size={48}>

    The Evil Rabbit jumps.

  </Text>

  <Text size={32}>

    The Evil Rabbit jumps.

  </Text>

  <Text size={24}>

    The Evil Rabbit jumps.

  </Text>

  <Text size={20}>

    The Evil Rabbit jumps.

  </Text>

  <Text size={16}>

    The Evil Rabbit jumps.

  </Text>

  <Text size={14}>

    The Evil Rabbit jumps.

  </Text>

  <Text size={12}>

    The Evil Rabbit jumps.

  </Text>

  <Text size={10}>

    The Evil Rabbit jumps.

  </Text>

</Container>

Weights

TODO: Swap Container with Stack

Code Editor
<Container>

  {[900, 800, 700, 600, 500, 400, 300, 200, 100].map(weight => (

    <Text key={weight} size={16} weight={weight}>

      The Evil Rabbit jumps. ({weight})

    </Text>

  ))}

</Container>

Color

Code Editor
<Text size={16} color="geist-success">

  The Evil Rabbit jumps.

</Text>

Modifiers

Code Editor
<Text size={16}>

  The <strong>Evil Rabbit</strong> <em>jumps</em>

  over the <s>quick brown fox</s> <u>Lawful Meerkat</u>.

</Text>

Polymorphic

Code Editor
<Text as="p" size={32}>

  {`<p>`} semantically, {`<h2>`} visually.

</Text>

Truncate

Code Editor
<div style={{ maxWidth: 100 }}>

  <Text size={16} truncate>The Evil Rabbit jumps.</Text>

</div>

Clamp

Code Editor
<div style={{ maxHeight: 100 }}>

  <Text size={16} truncate={2}>

    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.

  </Text>

</div>

Align

Code Editor
<div>

  <Text align="center">

    The Evil Rabbit jumps.

  </Text>



  <Text align="left">

    The Evil Rabbit jumps.

  </Text>



  <Text align="right">

    The Evil Rabbit jumps.

  </Text>

</div>

Unordered List

Code Editor
<UL>

  <LI>Static websites and static generators (React, Vue, Angular, etc)</LI>

  <LI>Code that renders HTML on the server-side</LI>

  <LI><UL>

  <LI>Static websites and static generators (React, Vue, Angular, etc)</LI>

  <LI>Code that renders HTML on the server-side</LI>

  <LI>API endpoints that query databases or web APIs and return dynamic data</LI>

</UL></LI>

</UL>

Ordered List

Code Editor
<OL>

  <LI>

    Push a commit to trigger the deployment.

  </LI>

  <LI>

    You'll see the deployment status on GitHub and Vercel dashboard.

  </LI>

</OL>

Code

Code Editor
<Text size={16}>

  It’s a matter of running <InlineCode>vercel</InlineCode> to get it up and

  running instantly.

</Text>

Codeblock

Code Editor
<Code>{`npm i vercel -g\nvercel init nextjs`}</Code>