Typography Components

PageTitle

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

Source Edit this page

Renders the primary page heading (<h1> by default) for the top-level title of a page. Pair it with SectionTitle (<h2>) for major section headings and Title (<h3>) for subsection headings to keep the document outline aligned with the visual hierarchy.

Basic PageTitle

A large heading component (renders as <h1>) for page titles. Defaults to semibold weight, heading font family, trackingTight letter spacing, and inherit appearance for a compact, impactful look.

Welcome to VaneUI

<PageTitle>Welcome to VaneUI</PageTitle>

PageTitle vs SectionTitle vs Title

Three heading components for a clean semantic hierarchy. Use them together so the document outline matches the visual hierarchy.

Page Heading (h1)

Section Heading (h2)

Subsection Heading (h3)

<Col>
  <PageTitle>Page Heading (h1)</PageTitle>
  <SectionTitle>Section Heading (h2)</SectionTitle>
  <Title>Subsection Heading (h3)</Title>
</Col>

PageTitle Sizes

Page titles come in five sizes: xs, sm, md (default), lg, xl.

Extra Small Page Title

Small Page Title

Medium Page Title (default)

Large Page Title

Extra Large Page Title

<Col>
  <PageTitle xs>Extra Small Page Title</PageTitle>
  <PageTitle sm>Small Page Title</PageTitle>
  <PageTitle>Medium Page Title (default)</PageTitle>
  <PageTitle lg>Large Page Title</PageTitle>
  <PageTitle xl>Extra Large Page Title</PageTitle>
</Col>

PageTitle Appearances

By default, PageTitle uses the inherit appearance — it inherits color from its parent. Use explicit appearances like primary, secondary, success, warning, danger, info to override.

Primary Page Title

Secondary Page Title

Success Page Title

Warning Page Title

Danger Page Title

Info Page Title

<Col>
  <PageTitle primary>Primary Page Title</PageTitle>
  <PageTitle secondary>Secondary Page Title</PageTitle>
  <PageTitle success>Success Page Title</PageTitle>
  <PageTitle warning>Warning Page Title</PageTitle>
  <PageTitle danger>Danger Page Title</PageTitle>
  <PageTitle info>Info Page Title</PageTitle>
</Col>

Font Weights

PageTitle is semibold by default. Override with any weight prop: thin, extralight, light, normal, medium, semibold, bold, extrabold, black.

Light Page Title

Normal Page Title

Medium Page Title

Semibold Page Title (default)

Bold Page Title

Black Page Title

<Col>
  <PageTitle light>Light Page Title</PageTitle>
  <PageTitle normal>Normal Page Title</PageTitle>
  <PageTitle medium>Medium Page Title</PageTitle>
  <PageTitle>Semibold Page Title (default)</PageTitle>
  <PageTitle bold>Bold Page Title</PageTitle>
  <PageTitle black>Black Page Title</PageTitle>
</Col>

Font Families

Switch between sans, serif, and mono font families.

Sans-serif Page Title

Serif Page Title

Monospace Page Title

<Col>
  <PageTitle sans>Sans-serif Page Title</PageTitle>
  <PageTitle serif>Serif Page Title</PageTitle>
  <PageTitle mono>Monospace Page Title</PageTitle>
</Col>

Italic PageTitle

Use the italic prop for italic emphasis.

Italic Page Title

<PageTitle italic>Italic Page Title</PageTitle>

Text Alignment

PageTitle is left-aligned by default. Use textCenter, textRight, or textJustify to change alignment.

Left Aligned (default)

Center Aligned

Right Aligned

<Card>
  <PageTitle wFull>Left Aligned (default)</PageTitle>
  <PageTitle wFull textCenter>Center Aligned</PageTitle>
  <PageTitle wFull textRight>Right Aligned</PageTitle>
</Card>

Custom HTML Tag

Override the rendered tag with the tag prop when the visual style of PageTitle is wanted but a different semantic level is required.

Rendered as h1 (default)

Rendered as h2

Rendered as h3

Rendered as div

<Col>
  <PageTitle>Rendered as h1 (default)</PageTitle>
  <PageTitle tag="h2">Rendered as h2</PageTitle>
  <PageTitle tag="h3">Rendered as h3</PageTitle>
  <PageTitle tag="div">Rendered as div</PageTitle>
</Col>

PageTitle in Context

Page titles work well as the main heading of a page, paired with a subtitle.

Product Documentation

Learn how to use VaneUI components in your projects.

Get started with our comprehensive guides and examples.

<Card>
  <PageTitle lg primary>Product Documentation</PageTitle>
  <Text secondary>Learn how to use VaneUI components in your projects.</Text>
  <Text>Get started with our comprehensive guides and examples.</Text>
</Card>

Page Header Pattern

Combine PageTitle with Text and Divider for a complete page header.

Dashboard

Welcome back. Here is an overview of your projects.

Content goes here...

<Col>
  <PageTitle xl>Dashboard</PageTitle>
  <Text lg secondary>Welcome back. Here is an overview of your projects.</Text>
  <Divider />
  <Text>Content goes here...</Text>
</Col>

Hero Page Header

Combine an xl PageTitle with a large subtitle and a call to action for a marketing-style hero.

Build Faster with VaneUI

A boolean-props React component library powered by Tailwind CSS v4.

<Stack itemsCenter>
  <PageTitle xl textCenter>Build Faster with VaneUI</PageTitle>
  <Text lg secondary textCenter>A boolean-props React component library powered by Tailwind CSS v4.</Text>
  <Row>
    <Button filled>Get Started</Button>
    <Button>View on GitHub</Button>
  </Row>
</Stack>

PageTitle Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`brand`	Appearance		Brand color appearance (blue)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inherit`	Appearance	✓	Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`link`	Appearance		Link color appearance (blue, for hyperlinks)
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`heading`	Font Family	✓	Heading font family (defaults to sans, independently customizable via --font-heading CSS variable)
`mono`	Font Family		Monospace font family
`sans`	Font Family		Sans-serif font family (default)
`serif`	Font Family		Serif font family
`italic`	Font Style		Italic font style
`notItalic`	Font Style		Not italic (normal) font style
`black`	Font Weight		Black font weight (900)
`bold`	Font Weight		Bold font weight (700)
`extrabold`	Font Weight		Extra bold font weight (800)
`extralight`	Font Weight		Extra light font weight (200)
`light`	Font Weight		Light font weight (300)
`medium`	Font Weight		Medium font weight (500)
`normal`	Font Weight		Normal font weight (400)
`semibold`	Font Weight	✓	Semibold font weight (600)
`thin`	Font Weight		Thin font weight (100)
`inheritColor`	Inherit Color		Inherit text color from parent via CSS variable cascade (suppresses data-appearance emission)
`noInheritColor`	Inherit Color		Keep own text color; do not inherit from parent
`inheritSize`	Inherit Size		Inherit font-size and line-height from the nearest parent typography element
`noInheritSize`	Inherit Size		Keep own font-size; do not inherit from parent
`trackingNormal`	Letter Spacing		Normal letter spacing (0)
`trackingTight`	Letter Spacing	✓	Tight letter spacing (-0.025em)
`trackingTighter`	Letter Spacing		Tighter letter spacing (-0.05em)
`trackingWide`	Letter Spacing		Wide letter spacing (0.025em)
`trackingWider`	Letter Spacing		Wider letter spacing (0.05em)
`trackingWidest`	Letter Spacing		Widest letter spacing (0.1em)
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textJustify`	Text Align		Justify text
`textLeft`	Text Align	✓	Align text to left
`textRight`	Text Align		Align text to right
`lineThrough`	Text Decoration		Add strikethrough/line-through decoration across text
`noUnderline`	Text Decoration		Remove text decoration (no underline, strikethrough, etc.)
`overline`	Text Decoration		Add overline decoration above text
`underline`	Text Decoration		Add underline decoration below text
`capitalize`	Text Transform		Capitalize first letter of each word
`lowercase`	Text Transform		Transform text to lowercase
`normalCase`	Text Transform		Normal text case (no transformation)
`uppercase`	Text Transform		Transform text to uppercase
`lineClamp2`	Truncate		Truncate at 2 lines with ellipsis
`lineClamp3`	Truncate		Truncate at 3 lines with ellipsis
`lineClamp4`	Truncate		Truncate at 4 lines with ellipsis
`lineClamp5`	Truncate		Truncate at 5 lines with ellipsis
`noTruncate`	Truncate		Remove truncation
`truncate`	Truncate		Single line truncation with ellipsis
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`cursorDefault`	Cursor		Default cursor - standard arrow
`cursorMove`	Cursor		Move cursor - indicates draggable element
`cursorNone`	Cursor		No cursor - hides the cursor
`cursorNotAllowed`	Cursor		Not-allowed cursor - indicates disabled state
`cursorPointer`	Cursor		Pointer cursor - indicates clickable element
`cursorText`	Cursor		Text cursor - indicates selectable text
`cursorWait`	Cursor		Wait cursor - indicates loading/processing
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display		Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items		Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsive`	Responsive	✓	Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`wAuto`	Width		Set width to auto
`wFit`	Width	✓	Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint