Text
Text component is the used to render text and paragraphs within an interface using well-defined typographic styles.
It renders a <p>
tag by default.
import { Text } from '@nextui-org/react';
Headings
Headings h1..h6
are titles or subtitles that you want to display on a webpage.
Gradient
You can use css
prop and the textGradient
util to render a gradient Text
.
Paragraph
The Text
component renders a paragraph by default.
Blockquote
Use blockquote
attribute to a Text
to render a blockquote.
Colors
Use color
attribute to a Text
to render the paragraph with a different color.
Sizes
Change the font-size
of the Text
with the size
property.
Compose
Effect of multiple Text
stacks
APIs
Text Props
Attribute | Type | Accepted values | Description | Default |
---|---|---|---|---|
h1 - h6 | boolean | - | Component name | false |
small | boolean | - | Component name | false |
span | boolean | - | Component name | false |
del | boolean | - | Component name | false |
i | boolean | - | Component name | false |
em | boolean | - | Component name | false |
b | boolean | - | Component name | false |
blockquote | boolean | - | Component name | false |
transform | TextTransform | TextTransforms | text-transform prop | none |
size | string number | - | Text size | inherit |
margin | string number | - | Text margin | inherit |
color | SimpleColors string | SimpleColors | Text color | default |
weight | TextWeights | TextWeights | Text weight | noset |
css | Stitches.CSS | - | Override Default CSS style | - |
as | keyof JSX.IntrinsicElements | - | Changes which tag component outputs | p |
... | HTMLAttributes | 'id', 'className', ... | native props | - |
Text types
Text Transforms
type TextTransforms = /* Keyword values */ | 'none' | 'capitalize' | 'uppercase' | 'lowercase' | 'full-width' | 'full-size-kana' /* Global values */ | 'inherit' | 'initial' | 'revert' | 'unset';
Simple Colors
type SimpleColors = | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
Text Weights
type TextWeights = 'hairline' | // 100, 'thin' | // 200, 'light' | // 300, 'normal' | // 400, 'medium' | // 500, 'semibold' | // 600, 'bold' | // 700, 'extrabold' | // 800, 'black' | // 900