Skip to main content

​
Introduction

The <Text> component is used to render text in your data app. It lets you easily display and customize your text content.

​
Basic usage

To use the <Text> component, you can just include it in your views and pass the text you want to display as a child of the component. 
<Text>
  Hello, world!
</Text>
You can use our scale of predefined styles to quickly customize your text. Here’s an example: 
<Text.H1>
  Hello, world!
</Text>
This will also render the text as a <h1> tag. These are the predefined styles available for the <Text> component, along with their corresponding font size and line height:
StyleSettings
H1Font size 36px, Line height 48px
H2Font size 26px, Line height 40px
H3Font size 20px, Line height 32px
H4Font size 16px, Line height 24px
H5Font size 14px, Line height 20px
H6Font size 12px, Line height 16px

​
Advanced usage

Apart from the predefined styles, you can also customize the text using the following properties:
​
color
string
Sets the color of the text. Options are: primary, secondary, destructive, accent, background, foreground, link, inherit.
​
size
string
Sets the size of the text. Options are: h1, h2, h3, h4, h5, h6.
​
family
string
Sets the font family of the text. Options are: sans, mono.
​
weight
string
Sets the font weight of the text. Options are: normal, medium, semibold, bold.
​
spacing
string
Sets the letter spacing of the text. Options are: normal, wide.
​
align
string
Sets the text alignment. Options are: left, center, right.
​
wordBreak
string
Sets the word break behavior. Options are: normal, breakWord, breakAll.
​
whiteSpace
string
Sets the white space behavior. Options are: normal, nowrap, pre, preLine, preWrap.
Here’s an example of how you can use these properties: 
<Text
  color="primary"
  size="h1"
  family="sans"
  weight="bold"
  spacing="wide"
  align="center"
  wordBreak="breakAll"
  whiteSpace="preWrap"
>
  Hello, world!
</Text>

​
Custom styles

If you want to further customize the text, you can use the class property to pass your own styles using Tailwind. Here’s an example: 
<Text class="text-4xl font-bold text-primary">
  Hello, world!
</Text>
For a guide on how to use custom styles with Tailwind, check out the Component styles page.