Documentation
Components
Text

Text

Display text using well-defined typographic styles.

Sizes

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

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

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

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

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

Polymorphic

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

Truncate

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

Clamp

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

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

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

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

Line Height

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

<Text wrap={false}>
  The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps.
  The Evil Rabbit jumps. The Evil Rabbit jumps.
</Text>
↓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

<Text monospace>This is a monospace font.</Text>
↓Code Editor
<Text monospace>This is a monospace font.</Text>

Unordered List

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

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

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

Codeblock

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