Documentation

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

Switch Link