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.

Small

You can use the small attribute to a Text to render a small paragraph.

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

Text types

Text Transform

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