VaneUI

VaneUI

Typography Components

Text

The primary component for rendering all text content. It provides props to control typographic properties like size, weight, color, and alignment.

Basic Text

Default text styling.

This is basic text content with default styling.

react-icon

BasicText.tsx

<Text>This is basic text content with default styling.</Text>

Text Sizes

Text comes in different sizes.

Text xs

Text sm

Text md

Text lg

Text xl

react-icon

TextSizes.tsx

<Row flexWrap>
  <Text xs>Text xs</Text>
  <Text sm>Text sm</Text>
  <Text md>Text md</Text>
  <Text lg>Text lg</Text>
  <Text xl>Text xl</Text>
</Row>

Text Font Weights

Text supports different font weights.

Text thin

Text extralight

Text light

Text normal

Text medium

Text semibold

Text bold

Text extrabold

Text black

react-icon

TextFontWeights.tsx

<Row flexWrap>
  <Text thin>Text thin</Text>
  <Text extralight>Text extralight</Text>
  <Text light>Text light</Text>
  <Text normal>Text normal</Text>
  <Text medium>Text medium</Text>
  <Text semibold>Text semibold</Text>
  <Text bold>Text bold</Text>
  <Text extrabold>Text extrabold</Text>
  <Text black>Text black</Text>
</Row>

Text Appearances

Text can have different color appearances.

Text default

Text accent

Text primary

Text secondary

Text tertiary

Text success

Text danger

Text warning

Text info

react-icon

TextAppearances.tsx

<Row flexWrap>
  <Text default>Text default</Text>
  <Text accent>Text accent</Text>
  <Text primary>Text primary</Text>
  <Text secondary>Text secondary</Text>
  <Text tertiary>Text tertiary</Text>
  <Text success>Text success</Text>
  <Text danger>Text danger</Text>
  <Text warning>Text warning</Text>
  <Text info>Text info</Text>
</Row>

Text Font Families

Text supports different font families.

Text sans

Text serif

Text mono

react-icon

TextFontFamilies.tsx

<Row flexWrap>
  <Text sans>Text sans</Text>
  <Text serif>Text serif</Text>
  <Text mono>Text mono</Text>
</Row>

Text Decorations

Text supports different text decorations.

Text underline

Text lineThrough

Text noUnderline

Text overline

react-icon

TextDecorations.tsx

<Row flexWrap>
  <Text underline>Text underline</Text>
  <Text lineThrough>Text lineThrough</Text>
  <Text noUnderline>Text noUnderline</Text>
  <Text overline>Text overline</Text>
</Row>

Text Font Styles

Text supports different font styles.

Text italic

Text notItalic

react-icon

TextFontStyles.tsx

<Row flexWrap>
  <Text italic>Text italic</Text>
  <Text notItalic>Text notItalic</Text>
</Row>

Text Transformations

Text supports different case transformations.

Text uppercase

Text lowercase

Text capitalize

Text normalCase

react-icon

TextTransformations.tsx

<Row flexWrap>
  <Text uppercase>Text uppercase</Text>
  <Text lowercase>Text lowercase</Text>
  <Text capitalize>Text capitalize</Text>
  <Text normalCase>Text normalCase</Text>
</Row>

Text Alignment

Text can be aligned differently.

Left aligned text

Center aligned text

Right aligned text

Justified text that should wrap to multiple lines to demonstrate the justification alignment. This text is long enough to show the justify effect.

react-icon

TextAlignment.tsx

<div className="space-y-2 border-2 border-dashed border-gray-300 p-4">
  <Text textLeft>Left aligned text</Text>
  <Text textCenter>Center aligned text</Text>
  <Text textRight>Right aligned text</Text>
  <Text textJustify>Justified text that should wrap to multiple lines to demonstrate the justification alignment. This text is long enough to show the justify effect.</Text>
</div>

Text Combinations

Combining multiple text properties.

Large Bold Primary Text

Small Italic Secondary Text

Medium Semibold Success Underlined Text

Extra Small Light Uppercase Text

Extra Large Extra Bold Danger Centered Text

react-icon

TextCombinations.tsx

<Col>
  <Text bold lg primary>Large Bold Primary Text</Text>
  <Text italic secondary sm>Small Italic Secondary Text</Text>
  <Text md semibold success underline>Medium Semibold Success Underlined Text</Text>
  <Text light uppercase xs>Extra Small Light Uppercase Text</Text>
  <Text danger extrabold textCenter xl>Extra Large Extra Bold Danger Centered Text</Text>
</Col>