Skip to main content
The Text component is a primitive typographic component for rendering styled text elements.

​
Import

import { Text } from 'theme-ui'

​
Usage

<Text>This is some text</Text>

​
Props

​
as
React.ElementType
default:"'span'"
Render as a different HTML element.
<Text as="p">Paragraph text</Text>
<Text as="div">Block text</Text>
<Text as="span">Inline text</Text>
​
variant
string
default:"'default'"
Text variant from theme.text. Common variants include default, heading, caps, small, etc.
<Text variant="heading">Heading style</Text>
<Text variant="caps">ALL CAPS</Text>
<Text variant="small">Small text</Text>
​
sx
ThemeUIStyleObject
Theme-aware styles for custom typography.
<Text
  sx={{
    fontSize: 4,
    fontWeight: 'bold',
    color: 'primary',
  }}
>
  Styled text
</Text>

​
Inherited Props

Text extends Box and accepts:
  • All standard HTML span attributes (or attributes for the element specified with as)
  • Box spacing props (m, p, mx, my, px, py, etc.)
  • Box color props (color, bg, opacity)

​
Typography Props

These can be applied via the sx prop:
  • fontFamily: Maps to theme.fonts
  • fontSize: Maps to theme.fontSizes
  • fontWeight: Maps to theme.fontWeights
  • lineHeight: Maps to theme.lineHeights
  • letterSpacing: Maps to theme.letterSpacings
  • textAlign, textDecoration, textTransform, etc.

​
Examples

​
Basic Text

<Text>Simple text content</Text>

​
Paragraph Text

<Text as="p" sx={{ mb: 3 }}>
  This is a paragraph with margin bottom.
</Text>

​
Colored Text

<Text color="primary">Primary colored text</Text>
<Text color="secondary">Secondary colored text</Text>

​
Responsive Font Size

<Text sx={{ fontSize: [2, 3, 4] }}>
  Font size increases with viewport
</Text>

​
Bold Text

<Text sx={{ fontWeight: 'bold' }}>
  Bold text
</Text>

​
Custom Typography

<Text
  sx={{
    fontFamily: 'heading',
    fontSize: 3,
    fontWeight: 'medium',
    lineHeight: 'tight',
    letterSpacing: 'wide',
  }}
>
  Custom typography
</Text>

​
Text with Icon

<Text sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
  <Icon />
  Text with icon
</Text>

​
Truncated Text

<Text
  sx={{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  }}
>
  This text will be truncated if too long
</Text>

Build docs developers (and LLMs) love

Get started for freeTalk to us