VaneUI

Documentation

GitHub

Getting Started

Core Concepts Installation Usage Basics

Basic Components

Button Badge Chip Checkbox Label Code Divider Input

Layout Components

Section Container Row Col Stack Card Grid3 Grid4 Grid5 Grid6

Typography Components

Text Title PageTitle SectionTitle Link List ListItem

Customization

Theming Overview Using ThemeProvider Theme & ThemeOverride ThemeDefaults ExtraClasses CSS Variables

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

BasicPageTitle.tsx

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

PageTitle Sizes

Page titles come in different sizes such as xs, sm, md, lg, xl.

PageTitle xs

PageTitle sm

PageTitle md

PageTitle lg

PageTitle xl

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

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

PageTitle link

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>
  <PageTitle link>PageTitle link</PageTitle>
</Col>

PageTitle Font Families

Page titles support different font families.

PageTitle sans

PageTitle serif

PageTitle mono

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

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

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

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

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>