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 h1..h6 are titles or subtitles that you want to display on a webpage.


You can use css prop and the textGradient util to render a gradient Text.


The Text component renders a paragraph by default.


Use blockquote attribute to a Text to render a blockquote.


Use color attribute to a Text to render the paragraph with a different color.


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).


Effect of multiple Text stacks


Text Props

h1 - h6booleanComponent namefalse
smallbooleanComponent namefalse
spanbooleanComponent namefalse
delbooleanComponent namefalse
ibooleanComponent namefalse
embooleanComponent namefalse
bbooleanComponent namefalse
blockquotebooleanComponent namefalse
transformTextTransformstext-transform propnone
sizestring number FontSizeText sizeinherit
colorSimpleColors stringText colordefault
weightTextWeightsText weightnoset
hideIn newxs sm md lg xlWhether the Text should be hidden from selected breakpoint.-
showIn newxs sm md lg xlWhether the Text should be visible only from selected breakpoint.-
cssStitches.CSSOverride Default CSS style-
askeyof JSX.IntrinsicElementsChanges which tag component outputsp

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
gradient blue backgroundgradient violet background