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

AttributeTypeAccepted valuesDescriptionDefault
h1 - h6boolean-Component namefalse
smallboolean-Component namefalse
spanboolean-Component namefalse
delboolean-Component namefalse
iboolean-Component namefalse
emboolean-Component namefalse
bboolean-Component namefalse
blockquoteboolean-Component namefalse
transformTextTransformTextTransformstext-transform propnone
sizestring number-Text sizeinherit
marginstring number-Text margininherit
colorSimpleColors stringSimpleColorsText colordefault
weightTextWeightsTextWeightsText weightnoset
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsp
...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
gradient blue backgroundgradient violet background