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

SectionTitle

A component for rendering headings of major sections within a page. It helps to create a clear and accessible document structure.

Basic SectionTitle

Default section title styling.

This is a Basic Section Title

BasicSectionTitle.tsx

<SectionTitle>This is a Basic Section Title</SectionTitle>

SectionTitle Sizes

Section titles come in different sizes.

SectionTitle xs

SectionTitle sm

SectionTitle md

SectionTitle lg

SectionTitle xl

SectionTitleSizes.tsx

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

SectionTitle Font Weights

Section titles support different font weights.

SectionTitle thin

SectionTitle extralight

SectionTitle light

SectionTitle normal

SectionTitle medium

SectionTitle semibold

SectionTitle bold

SectionTitle extrabold

SectionTitle black

SectionTitleFontWeights.tsx

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

SectionTitle Appearances

Section titles can have different color appearances.

SectionTitle default

SectionTitle accent

SectionTitle primary

SectionTitle secondary

SectionTitle tertiary

SectionTitle success

SectionTitle danger

SectionTitle warning

SectionTitle info

SectionTitle link

SectionTitleAppearances.tsx

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

SectionTitle Font Families

Section titles support different font families.

SectionTitle sans

SectionTitle serif

SectionTitle mono

SectionTitleFontFamilies.tsx

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

SectionTitle Styles

Section titles support different styles and decorations.

SectionTitle underline

SectionTitle lineThrough

SectionTitle noUnderline

SectionTitle overline

SectionTitleStyles.tsx

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

SectionTitle Transformations

Section titles support different case transformations.

SectionTitle uppercase

SectionTitle lowercase

SectionTitle capitalize

SectionTitle normalCase

SectionTitleTransformations.tsx

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

SectionTitle Alignment

Section titles can be aligned differently.

Left Aligned Section Title

Center Aligned Section Title

Right Aligned Section Title

SectionTitleAlignment.tsx

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

SectionTitle Combinations

Combining multiple section title properties.

Large Bold Primary Section Title

Small Italic Secondary Section Title

Medium Semibold Success Underlined Section Title

Extra Small Light Uppercase Section Title

Extra Large Extra Bold Danger Centered Section Title

SectionTitleCombinations.tsx

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