Text
A text element with comprehensive typography controls including size, color, weight, spacing, and text decorations.
Here is some text.
Colors
Normal textMuted textDisabled textColored text
Sizes
xssmbaselgxl2xl3xl4xl5xl6xl7xl8xl9xl
Weights
ThinExtralightLightNormalMediumSemiboldBoldExtraboldBlack
Alignment
Left
Center
Right
Letter spacing
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Line height
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Formatting
ItalicUnderlineStrikethrough
Decoration style
Customize the style of underline or strikethrough decorations.
Solid underlineDouble underlineDotted underlineDashed underlineWavy underline
Decoration color
Red underlineBlue underlineGreen underlineOrange strikethrough
Transform
CapitalizeUppercaseLowercase
Truncate
This is some really long text that should truncate.
This is some really long text that should truncate.
This is some really long text that should truncate.
This is some really long text that should truncate.
Whitespace
Control how whitespace is handled within text.
Multiple spaces collapse and text wraps normally.
This text will not wrap to the next line.
Preserves spaces
and newlines.
Preserves spaces
and wraps text.
Word break
Control how words break when reaching the end of a line.
Supercalifragilisticexpialidocious
Supercalifragilisticexpialidocious
Supercalifragilisticexpialidocious
Vertical align
Control vertical alignment of inline elements. Useful for superscript, subscript, and aligning text with icons.
E = mc2
H2O
aligned to top
aligned to middle
aligned to bottom
Text indent
Indent the first line of text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Component props
| Name | Type | Values |
|---|---|---|
| color | FontColor | SemanticColor | ColorName | TailwindColor |
| size | Responsive<FontSize> | "xs" | "sm" | "base" | "lg" | "xl" | ... | "9xl" |
| weight | Responsive<FontWeight> | "thin" | "light" | "normal" | "medium" | "semibold" | "bold" | ... |
| align | Responsive<TextAlign> | "left" | "center" | "right" |
| spacing | Responsive<LetterSpacing> | "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" |
| lineHeight | Responsive<LineHeight> | "none" | "tight" | "snug" | "normal" | "relaxed" | "loose" | "3"-"10" |
| wrap | Responsive<TextWrap> | "wrap" | "nowrap" | "balance" | "pretty" |
| whitespace | Responsive<Whitespace> | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" | "break-spaces" |
| wordBreak | Responsive<WordBreak> | "normal" | "words" | "all" | "keep" |
| transform | Responsive<TextTransform> | "capitalize" | "uppercase" | "lowercase" | "none" |
| indent | Responsive<TextIndent> | "0" | "px" | "0.5" | "1" | ... | "24" |
| verticalAlign | Responsive<VerticalAlign> | "baseline" | "top" | "middle" | "bottom" | "text-top" | "text-bottom" | "sub" | "super" |
| truncate | Responsive<boolean> | Truncate text with ellipsis |
| italic | Responsive<boolean> | Italic text style |
| underline | Responsive<boolean> | Underline text decoration |
| strikethrough | Responsive<boolean> | Line-through text decoration |
| decorationStyle | Responsive<TextDecorationStyle> | "solid" | "double" | "dotted" | "dashed" | "wavy" |
| decorationColor | FontColor | SemanticColor | ColorName | TailwindColor |
| as | TextElement | "span" | "div" | "label" | "p" | "h1" | ... | "code" | "blockquote" |
| render | RenderProp | Render prop for polymorphism |