VaneUI
Typography Components
Title
Renders a heading to establish a semantic hierarchy on the page. Use this component for the main titles of pages or sections.
Basic Title
Default title styling.
This is a Basic Title
BasicTitle.tsx
<Title>This is a Basic Title</Title>Title Sizes
Titles come in different sizes.
Title xs
Title sm
Title md
Title lg
Title xl
TitleSizes.tsx
<Col lg>
<Title xs>Title xs</Title>
<Title sm>Title sm</Title>
<Title md>Title md</Title>
<Title lg>Title lg</Title>
<Title xl>Title xl</Title>
</Col>Title Font Weights
Titles support different font weights.
Title thin
Title extralight
Title light
Title normal
Title medium
Title semibold
Title bold
Title extrabold
Title black
TitleFontWeights.tsx
<Col lg>
<Title thin>Title thin</Title>
<Title extralight>Title extralight</Title>
<Title light>Title light</Title>
<Title normal>Title normal</Title>
<Title medium>Title medium</Title>
<Title semibold>Title semibold</Title>
<Title bold>Title bold</Title>
<Title extrabold>Title extrabold</Title>
<Title black>Title black</Title>
</Col>Title Appearances
Titles can have different color appearances.
Title default
Title accent
Title primary
Title secondary
Title tertiary
Title success
Title danger
Title warning
Title info
TitleAppearances.tsx
<Col lg>
<Title default>Title default</Title>
<Title accent>Title accent</Title>
<Title primary>Title primary</Title>
<Title secondary>Title secondary</Title>
<Title tertiary>Title tertiary</Title>
<Title success>Title success</Title>
<Title danger>Title danger</Title>
<Title warning>Title warning</Title>
<Title info>Title info</Title>
</Col>Title Font Families
Titles support different font families.
Title sans
Title serif
Title mono
TitleFontFamilies.tsx
<Col lg>
<Title sans>Title sans</Title>
<Title serif>Title serif</Title>
<Title mono>Title mono</Title>
</Col>Title Styles
Titles support different styles and decorations.
Title underline
Title lineThrough
Title noUnderline
Title overline
TitleStyles.tsx
<Col lg>
<Title underline>Title underline</Title>
<Title lineThrough>Title lineThrough</Title>
<Title noUnderline>Title noUnderline</Title>
<Title overline>Title overline</Title>
</Col>Title Transformations
Titles support different case transformations.
Title uppercase
Title lowercase
Title capitalize
Title normalCase
TitleTransformations.tsx
<Col lg>
<Title uppercase>Title uppercase</Title>
<Title lowercase>Title lowercase</Title>
<Title capitalize>Title capitalize</Title>
<Title normalCase>Title normalCase</Title>
</Col>Title Alignment
Titles can be aligned differently.
Left Aligned Title
Center Aligned Title
Right Aligned Title
TitleAlignment.tsx
<div className="space-y-4 border-2 border-dashed border-gray-300 p-4">
<Title textLeft>Left Aligned Title</Title>
<Title textCenter>Center Aligned Title</Title>
<Title textRight>Right Aligned Title</Title>
</div>Title Combinations
Combining multiple title properties.
Large Bold Primary Title
Small Italic Secondary Title
Medium Semibold Success Underlined Title
Extra Small Light Uppercase Title
Extra Large Extra Bold Danger Centered Title
TitleCombinations.tsx
<Col lg>
<Title bold lg primary>Large Bold Primary Title</Title>
<Title italic secondary sm>Small Italic Secondary Title</Title>
<Title md semibold success underline>Medium Semibold Success Underlined Title</Title>
<Title light uppercase xs>Extra Small Light Uppercase Title</Title>
<Title danger extrabold textCenter xl>Extra Large Extra Bold Danger Centered Title</Title>
</Col>