Documentation
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.
Note: You can use any of the theme font sizes included your own custom font sizes (if you have).
Compose
Effect of multiple Text stacks
APIs
Text Props
| Attribute | Type | 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 | TextTransforms | text-transform prop | none |
| size | string number FontSize | Text size | inherit |
| color | SimpleColors string | Text color | default |
| weight | TextWeights | Text weight | noset |
hideIn new | xs sm md lg xl | Whether the Text should be hidden from selected breakpoint. | - |
showIn new | xs sm md lg xl | Whether the Text should be visible only from selected breakpoint. | - |
| css | Stitches.CSS | Override Default CSS style | - |
| as | keyof JSX.IntrinsicElements | Changes which tag component outputs | p |
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
