VaneUI

VaneUI

Typography Components

PageTitle

A specialized component for the primary heading of a page. It ensures consistent styling for top-level titles across your application.

Basic PageTitle

Default page title styling.

This is a Basic Page Title

react-icon

BasicPageTitle.tsx

<PageTitle>This is a Basic Page Title</PageTitle>

PageTitle Sizes

Page titles come in different sizes.

PageTitle xs

PageTitle sm

PageTitle md

PageTitle lg

PageTitle xl

react-icon

PageTitleSizes.tsx

<Col lg>
  <PageTitle xs>PageTitle xs</PageTitle>
  <PageTitle sm>PageTitle sm</PageTitle>
  <PageTitle md>PageTitle md</PageTitle>
  <PageTitle lg>PageTitle lg</PageTitle>
  <PageTitle xl>PageTitle xl</PageTitle>
</Col>

PageTitle Font Weights

Page titles support different font weights.

PageTitle thin

PageTitle extralight

PageTitle light

PageTitle normal

PageTitle medium

PageTitle semibold

PageTitle bold

PageTitle extrabold

PageTitle black

react-icon

PageTitleFontWeights.tsx

<Col lg>
  <PageTitle thin>PageTitle thin</PageTitle>
  <PageTitle extralight>PageTitle extralight</PageTitle>
  <PageTitle light>PageTitle light</PageTitle>
  <PageTitle normal>PageTitle normal</PageTitle>
  <PageTitle medium>PageTitle medium</PageTitle>
  <PageTitle semibold>PageTitle semibold</PageTitle>
  <PageTitle bold>PageTitle bold</PageTitle>
  <PageTitle extrabold>PageTitle extrabold</PageTitle>
  <PageTitle black>PageTitle black</PageTitle>
</Col>

PageTitle Appearances

Page titles can have different color appearances.

PageTitle default

PageTitle accent

PageTitle primary

PageTitle secondary

PageTitle tertiary

PageTitle success

PageTitle danger

PageTitle warning

PageTitle info

react-icon

PageTitleAppearances.tsx

<Col lg>
  <PageTitle default>PageTitle default</PageTitle>
  <PageTitle accent>PageTitle accent</PageTitle>
  <PageTitle primary>PageTitle primary</PageTitle>
  <PageTitle secondary>PageTitle secondary</PageTitle>
  <PageTitle tertiary>PageTitle tertiary</PageTitle>
  <PageTitle success>PageTitle success</PageTitle>
  <PageTitle danger>PageTitle danger</PageTitle>
  <PageTitle warning>PageTitle warning</PageTitle>
  <PageTitle info>PageTitle info</PageTitle>
</Col>

PageTitle Font Families

Page titles support different font families.

PageTitle sans

PageTitle serif

PageTitle mono

react-icon

PageTitleFontFamilies.tsx

<Col lg>
  <PageTitle sans>PageTitle sans</PageTitle>
  <PageTitle serif>PageTitle serif</PageTitle>
  <PageTitle mono>PageTitle mono</PageTitle>
</Col>

PageTitle Styles

Page titles support different styles and decorations.

PageTitle underline

PageTitle lineThrough

PageTitle noUnderline

PageTitle overline

react-icon

PageTitleStyles.tsx

<Col lg>
  <PageTitle underline>PageTitle underline</PageTitle>
  <PageTitle lineThrough>PageTitle lineThrough</PageTitle>
  <PageTitle noUnderline>PageTitle noUnderline</PageTitle>
  <PageTitle overline>PageTitle overline</PageTitle>
</Col>

PageTitle Transformations

Page titles support different case transformations.

PageTitle uppercase

PageTitle lowercase

PageTitle capitalize

PageTitle normalCase

react-icon

PageTitleTransformations.tsx

<Col lg>
  <PageTitle uppercase>PageTitle uppercase</PageTitle>
  <PageTitle lowercase>PageTitle lowercase</PageTitle>
  <PageTitle capitalize>PageTitle capitalize</PageTitle>
  <PageTitle normalCase>PageTitle normalCase</PageTitle>
</Col>

PageTitle Alignment

Page titles can be aligned differently.

Left Aligned Page Title

Center Aligned Page Title

Right Aligned Page Title

react-icon

PageTitleAlignment.tsx

<div className="space-y-4 border-2 border-dashed border-gray-300 p-4">
  <PageTitle textLeft>Left Aligned Page Title</PageTitle>
  <PageTitle textCenter>Center Aligned Page Title</PageTitle>
  <PageTitle textRight>Right Aligned Page Title</PageTitle>
</div>

PageTitle Combinations

Combining multiple page title properties.

Large Bold Primary Page Title

Small Italic Secondary Page Title

Medium Semibold Success Underlined Page Title

Extra Small Light Uppercase Page Title

Extra Large Extra Bold Danger Centered Page Title

react-icon

PageTitleCombinations.tsx

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