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