Text

Text component provides consistent typography with various variants, colors, and styling options for displaying content.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁸⁾

Properties

⁽³⁸⁾

Playground

Basic Usage

Basic text usage with different variants and semantic elements.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"h1"
>
Heading
 
1
</Text
>
          
<Text
 
variant
=
"h2"
>
Heading
 
2
</Text
>
          
<Text
 
variant
=
"h3"
>
Heading
 
3
</Text
>
          
<Text
 
variant
=
"h4"
>
Heading
 
4
</Text
>
          
<Text
 
variant
=
"h5"
>
Heading
 
5
</Text
>
          
<Text
 
variant
=
"h6"
>
Heading
 
6
</Text
>
        
</Block
>
      
</Card
>
 
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
>
Body
 text is the 
default
 variant 
for
 paragraphs
.
</Text
>
          
<Text
 
variant
=
"small"
>
Caption
 text keeps supporting details readable
.
</Text
>
          
<Text
 
variant
=
"small"
>
Small
 text works well 
for
 fine print or metadata
.
</Text
>
        
</Block
>
      
</Card
>
 
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
>
Default
 text without a variant falls back to body styling
.
</Text
>
          
<Text
>
            
This
 paragraph shows natural wrapping behavior when the content spans multiple lines in a layout
.
          
</Text
>
        
</Block
>
      
</Card
>
    
</Block
>
  
)
;
}

Colors

Text color variants and custom color options for different contexts.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Semantic
 colors
          
</Text
>
          
<Text
 
color
=
"primary"
>
Primary
 color text
</Text
>
          
<Text
 
color
=
"secondary"
>
Secondary
 color text
</Text
>
          
<Text
 
color
=
"muted"
>
Muted
 color text
</Text
>
          
<Text
 
color
=
"disabled"
>
Disabled
 color text
</Text
>
          
<Text
 
color
=
"link"
>
Link
 color text
</Text
>
        
</Block
>
      
</Card
>
 
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Custom
 palette
          
</Text
>
          
<Text
 
color
=
"#ff6b6b"
>
Custom
 red text
</Text
>
          
<Text
 
color
=
"#4ecdc4"
>
Custom
 teal text
</Text
>
          
<Text
 
color
=
"#45b7d1"
>
Custom
 blue text
</Text
>
          
<Text
 
color
=
"#96ceb4"
>
Custom
 green text
</Text
>
          
<Text
 
color
=
"#feca57"
>
Custom
 yellow text
</Text
>
        
</Block
>
      
</Card
>
    
</Block
>
  
)
;
}

c (color shorthand)

c is a shorthand for color that resolves through the theme. Accepts:

•

'dimmed' → maps to theme.text.muted

•

Theme text keys ('primary', 'secondary', 'muted', 'disabled', 'link')

•

Palette names ('primary', 'success', …) → palette shade-6 (readable text)

•

'palette.shade' syntax ('primary.6')

•

Any CSS color string

Loading demo…

import
 
{
 
Block
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Text
 
weight
=
"semibold"
>
c
 
(
color shorthand
)
</Text
>
 
      
<Text
 
c
=
"dimmed"
>
c
=
"dimmed"
 — maps to theme
.
text
.
muted
</Text
>
      
<Text
 
c
=
"primary"
>
c
=
"primary"
 — primary palette text shade
</Text
>
      
<Text
 
c
=
"error"
>
c
=
"error"
 — error palette readable shade
</Text
>
      
<Text
 
c
=
"success"
>
c
=
"success"
</Text
>
 
      
<Text
 
c
=
"primary.5"
>
c
=
"primary.5"
 — explicit shade
</Text
>
      
<Text
 
c
=
"error.7"
>
c
=
"error.7"
 — darker error
</Text
>
 
      
<Text
 
c
=
"#a855f7"
>
c
=
"#a855f7"
 — raw 
CSS
 color
</Text
>
 
      
<Text
>
        
Inline
 composition
:
{
' '
}
        
<Text
 
c
=
"dimmed"
>
subtle inline text
</Text
>
 next to
{
' '
}
        
<Text
 
c
=
"primary"
 
weight
=
"600"
>
brand text
</Text
>
.
      
</Text
>
    
</Block
>
  
)
;
}

Weights

Different font weight options from light to bold.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Named
 weights
          
</Text
>
          
<Text
 
weight
=
"light"
>
Light
 weight text
</Text
>
          
<Text
 
weight
=
"normal"
>
Normal
 weight 
text
 
(
default
)
</Text
>
          
<Text
 
weight
=
"medium"
>
Medium
 weight text
</Text
>
          
<Text
 
weight
=
"semibold"
>
Semibold
 weight text
</Text
>
          
<Text
 
weight
=
"bold"
>
Bold
 weight text
</Text
>
          
<Text
 
weight
=
"black"
>
Black
 weight text
</Text
>
        
</Block
>
      
</Card
>
 
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Numeric
 weights
          
</Text
>
          
<Text
 
weight
=
"100"
>
Weight
 
100
 
(
Thin
)
</Text
>
          
<Text
 
weight
=
"300"
>
Weight
 
300
 
(
Light
)
</Text
>
          
<Text
 
weight
=
"400"
>
Weight
 
400
 
(
Normal
)
</Text
>
          
<Text
 
weight
=
"600"
>
Weight
 
600
 
(
Semibold
)
</Text
>
          
<Text
 
weight
=
"700"
>
Weight
 
700
 
(
Bold
)
</Text
>
          
<Text
 
weight
=
"900"
>
Weight
 
900
 
(
Black
)
</Text
>
        
</Block
>
      
</Card
>
    
</Block
>
  
)
;
}

Font family (ff shorthand)

ff is the shorthand alias for fontFamily. Both forms work; ff wins when both are set. The same alias is also accepted by Title, the H1–H6 / Code / Kbd / Bold / Italic aliases, Highlight, GradientText, ShimmerText, and the field components via labelProps / descriptionProps / disclaimerProps.

Loading demo…

import
 
{
 
Block
,
 
Code
,
 
H3
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Text
 
weight
=
"semibold"
>
ff
 
(
font family
)
 shorthand
</Text
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
Default
 theme 
font
 
(
no override
)
</Text
>
        
<Text
>
The
 quick brown fox jumps over the lazy dog
</Text
>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
ff
=
"monospace"
</Text
>
        
<Text
 
ff
=
"monospace"
>
The
 quick brown fox jumps over the lazy dog
</Text
>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
ff
=
"Georgia, serif"
 — also works on 
Title
 aliases
</Text
>
        
<H3
 
ff
=
"Georgia, serif"
>
Heading
 in 
Georgia
</H3
>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
          fontFamily still 
works
 
(
ff takes precedence when both are set
)
        
</Text
>
        
<Text
 
fontFamily
=
"Courier New"
>
Inline
 using 
`fontFamily`
 — long form
</Text
>
        
<Text
 
ff
=
"Georgia"
 
fontFamily
=
"Courier New"
>
          
Both
 set
:
 
`ff="Georgia"`
 wins
        
</Text
>
      
</Block
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"muted"
>
Inline
 
Code
/
Kbd
 inherit ff too
</Text
>
        
<Text
>
          
Press
 
<Code
 
ff
=
"ui-monospace, monospace"
>
cmd
+
k
</Code
>
 to open spotlight
        
</Text
>
      
</Block
>
    
</Block
>
  
)
;
}

Sizes

Different text sizes from small to large.

Loading demo…

import
 
{
 
Block
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
SIZES
 
=
 
[
'xs'
,
 
'sm'
,
 
'md'
,
 
'lg'
,
 
'xl'
,
 
'2xl'
,
 
'3xl'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
align
=
"center"
 
gap
=
"lg"
 
wrap
=
"wrap"
>
      
{
SIZES
.
map
(
(
size
)
 
=>
 
(
        
<Block
 
key
=
{
size
}
 
align
=
"center"
>
          
<Text
 
size
=
{
size
}
>
Aa
</Text
>
          
<Text
 
variant
=
"small"
>
{
size
}
</Text
>
        
</Block
>
      
)
)
}
    
</Row
>
  
)
;
}

Heights

Line height control for text content using the lineHeight prop.

Usage

The lineHeight prop accepts:

•

Multipliers (e.g., 1.5) - multiplied by the font size

•

Absolute values (e.g., 24) - treated as pixel values when > 3

<Text
 
lineHeight
=
{
1.2
}
>
Tight
 line height
</Text
>
<Text
 
lineHeight
=
{
1.5
}
>
Normal
 line height
</Text
>
<Text
 
lineHeight
=
{
24
}
>
Absolute
 line 
height
 
(
24px
)
</Text
>

This provides precise control over text spacing and readability.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 SAMPLE_TEXT 
=
  
'This paragraph shows how line height changes the spacing between lines of text when content wraps across multiple lines.'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Tight
 line 
height
 
(
1.2
)
          
</Text
>
          
<Text
 
lineHeight
=
{
1.2
}
>
{
SAMPLE_TEXT
}
</Text
>
        
</Block
>
 
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Standard
 line 
height
 
(
1.5
)
          
</Text
>
          
<Text
 
lineHeight
=
{
1.5
}
>
{
SAMPLE_TEXT
}
</Text
>
        
</Block
>
 
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Relaxed
 line 
height
 
(
1.8
)
          
</Text
>
          
<Text
 
lineHeight
=
{
1.8
}
>
{
SAMPLE_TEXT
}
</Text
>
        
</Block
>
 
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Loose
 line 
height
 
(
2.0
)
          
</Text
>
          
<Text
 
lineHeight
=
{
2
}
>
{
SAMPLE_TEXT
}
</Text
>
        
</Block
>
 
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Absolute
 line 
height
 
(
24px
)
          
</Text
>
          
<Text
 
lineHeight
=
{
24
}
>
{
SAMPLE_TEXT
}
</Text
>
        
</Block
>
      
</Block
>
    
</Card
>
  
)
;
}

Tracking

Use the tracking prop to adjust letter spacing for text. Negative values tighten spacing, positive values loosen it, and numeric tokens work alongside size and variant changes.

•

Combine tracking with different size values to balance compact and spacious typography.

•

Headings can use subtle negative tracking for denser compositions.

•

Uppercase text often benefits from wider tracking to maintain legibility.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Negative
 
tracking
 
(
tighter
)
          
</Text
>
          
<Text
 
tracking
=
{
-
1
}
>
This
 text uses 
-
1px letter spacing
.
</Text
>
          
<Text
 
tracking
=
{
-
0.5
}
>
This
 text uses 
-
0.
5px letter spacing
.
</Text
>
        
</Block
>
      
</Card
>
 
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Default
 tracking
          
</Text
>
          
<Text
>
This
 text keeps the 
default
 letter spacing
.
</Text
>
        
</Block
>
      
</Card
>
 
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Positive
 
tracking
 
(
looser
)
          
</Text
>
          
<Text
 
tracking
=
{
0.5
}
>
This
 text uses 
0.
5px letter spacing
.
</Text
>
          
<Text
 
tracking
=
{
1
}
>
This
 text uses 1px letter spacing
.
</Text
>
          
<Text
 
tracking
=
{
2
}
>
This
 text uses 2px letter spacing
.
</Text
>
          
<Text
 
tracking
=
{
4
}
>
This
 text uses 4px letter spacing
.
</Text
>
        
</Block
>
      
</Card
>
 
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Different
 sizes with tracking
          
</Text
>
          
<Text
 
size
=
"xs"
 
tracking
=
{
1
}
>
Extra
 small with 1px tracking
.
</Text
>
          
<Text
 
size
=
"sm"
 
tracking
=
{
1
}
>
Small
 with 1px tracking
.
</Text
>
          
<Text
 
size
=
"md"
 
tracking
=
{
1
}
>
Medium
 with 1px tracking
.
</Text
>
          
<Text
 
size
=
"lg"
 
tracking
=
{
1
}
>
Large
 with 1px tracking
.
</Text
>
          
<Text
 
size
=
"xl"
 
tracking
=
{
2
}
>
Extra
 large with 2px tracking
.
</Text
>
        
</Block
>
      
</Card
>
 
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Headings
 with tracking
          
</Text
>
          
<Text
 
variant
=
"h1"
 
tracking
=
{
-
1
}
>
H1
 heading with 
-
1px tracking
</Text
>
          
<Text
 
variant
=
"h2"
 
tracking
=
{
0
}
>
H2
 heading with 
default
 tracking
</Text
>
          
<Text
 
variant
=
"h3"
 
tracking
=
{
1
}
>
H3
 heading with 1px tracking
</Text
>
        
</Block
>
      
</Card
>
 
      
<Card
 
p
=
"md"
>
        
<Block
>
          
<Text
 
variant
=
"p"
 
weight
=
"medium"
>
            
Uppercase
 spacing
          
</Text
>
          
<Text
 
weight
=
"bold"
 
tracking
=
{
3
}
 uppercase
>
            
Uppercase
 text with wide tracking
          
</Text
>
        
</Block
>
      
</Card
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Text

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap