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.

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

Switch Link