Text

Display text using well-defined typographic styles.

Sizes

The Evil Rabbit jumps.

Code Editor

<Container>
  <Text size={"extraTitle"}>The Evil Rabbit jumps.</Text>
  <Text size={"title"}>The Evil Rabbit jumps.</Text>
  <Text size={"large"}>The Evil Rabbit jumps.</Text>
  <Text size={"medium"}>The Evil Rabbit jumps.</Text>
  <Text size={"normal"}>The Evil Rabbit jumps.</Text>
  <Text size={"small"}>The Evil Rabbit jumps.</Text>
  <Text size={"tiny"}>The Evil Rabbit jumps.</Text>
</Container>

Weights

The Evil Rabbit jumps.

Code Editor

<Container>
  <Text weight={"black"}>The Evil Rabbit jumps.</Text>
  <Text weight={"extraBold"}>The Evil Rabbit jumps.</Text>
  <Text weight={"bold"}>The Evil Rabbit jumps.</Text>
  <Text weight={"semiBold"}>The Evil Rabbit jumps.</Text>
  <Text weight={"medium"}>The Evil Rabbit jumps.</Text>
  <Text weight={"regular"}>The Evil Rabbit jumps.</Text>
  <Text weight={"light"}>The Evil Rabbit jumps.</Text>
  <Text weight={"extraLight"}>The Evil Rabbit jumps.</Text>
  <Text weight={"thin"}>The Evil Rabbit jumps.</Text>
</Container>

Colors

💡

The main difference between text and accent colors is that text colors are dynamic and will change depending on the theme. Accent colors are static and will always be the same.

Text

The Evil Rabbit jumps.

Code Editor

<Container>
  <Text color={"lightest"}>The Evil Rabbit jumps.</Text>
  <Text color={"lighter"}>The Evil Rabbit jumps.</Text>
  <Text color={"light"}>The Evil Rabbit jumps.</Text>
  <Text color={"dark"}>The Evil Rabbit jumps.</Text>
  <Text color={"darker"}>The Evil Rabbit jumps.</Text>
  <Text color={"darkest"}>The Evil Rabbit jumps.</Text>
</Container>

Accent

The Evil Rabbit jumps.

Code Editor

<Container>
  <Text accent={"primary"}>The Evil Rabbit jumps.</Text>
  <Text accent={"secondary"}>The Evil Rabbit jumps.</Text>
  <Text accent={"info"}>The Evil Rabbit jumps.</Text>
  <Text accent={"success"}>The Evil Rabbit jumps.</Text>
  <Text accent={"warning"}>The Evil Rabbit jumps.</Text>
  <Text accent={"danger"}>The Evil Rabbit jumps.</Text>
  <Text accent={"light"}>The Evil Rabbit jumps.</Text>
  <Text accent={"dark"}>The Evil Rabbit jumps.</Text>
</Container>

Modifiers

The Evil Rabbit jumpsover the ~~quick brown fox~~ Lawful Meerkat.

Code Editor

<Text>
  The <strong>Evil Rabbit</strong> <em>jumps</em>
  over the <s>quick brown fox</s> <u>Lawful Meerkat</u>.
</Text>

Polymorphic

<p> semantically, <h2> visually.

Code Editor

<Text as={"span"}>
  {"<p>"} semantically, {"<h2>"} visually.
</Text>

Truncate

The Evil Rabbit jumps.

Code Editor

<div style={{ maxWidth: 100 }}>
  <Text truncate>The Evil Rabbit jumps.</Text>
</div>

Clamp

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

<div style={{ maxHeight: 100 }}>
  <Text 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

The Evil Rabbit jumps.

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>

Transform

The Evil Rabbit jumps.

Code Editor

<Container>
  <Text transform={"uppercase"}>The Evil Rabbit jumps.</Text>
  <Text transform={"lowercase"}>The Evil Rabbit jumps.</Text>
  <Text transform={"capitalize"}>The Evil Rabbit jumps.</Text>
</Container>

Title

The Evil Rabbit jumps.

Code Editor

<Text title={"The Evil Rabbit jumps."}>The Evil Rabbit jumps.</Text>

Line Height

Code Editor

<Text lineHeight={3}>
  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>

Wrap

The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps.

Code Editor

<Text wrap={false}>
  The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps.
  The Evil Rabbit jumps. The Evil Rabbit jumps.
</Text>

Monospace

This is a monospace font.

Code Editor

<Text monospace>This is a monospace font.</Text>

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

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

Ordered List

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

Code Editor

<OrderedList>
  <ListItem>Push a commit to trigger the deployment.</ListItem>
  <ListItem>
    {"You'll see the deployment status on GitHub and Vercel dashboard."}
  </ListItem>
</OrderedList>

Code

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

Code Editor

<Text>
  It’s a matter of running <InlineCode>kitchn</InlineCode> to get it up
  and running instantly.
</Text>

Codeblock

/components/Code.tsx
git clone https://github.com/tonightpass/kitchn.git
yarn install

Code Editor

<Code title={"/components/Code.tsx"}>
  {"git clone https://github.com/tonightpass/kitchn.git\nyarn install"}
</Code>

Last updated on February 11, 2025

Tabs Textarea