Title

A polymorphic heading component that renders any h1–h6 element with a visual size scale independent of semantic level, multiple font weights, text alignment, and color variants including a gradient.

Import

tsx

import { Title } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

Preview

Sizes

Display — xxl

Heading — xl

Section — lg

Subsection — md

Label — sm

Caption — xs

Color variants

Default color

Muted color

Primary color

Gradient color

Props

Prop	Type	Default	Description
level	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	`'h1'`	Semantic HTML heading element rendered.
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	—	Visual size. Defaults to match the level (h1→xxl, h2→xl, etc.).
weight	`'light' \| 'normal' \| 'medium' \| 'semibold' \| 'bold' \| 'extrabold'`	`'bold'`	Font weight of the heading.
align	`'left' \| 'center' \| 'right'`	`'left'`	Text alignment.
color	`'default' \| 'muted' \| 'primary' \| 'gradient'`	`'default'`	Color variant. 'gradient' applies a linear gradient via background-clip.

Examples

Heading levels

tsx

import { Title } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  return (
    <div>
      <Title level="h1">Heading 1</Title>
      <Title level="h2">Heading 2</Title>
      <Title level="h3">Heading 3</Title>
    </div>
  )
}

Color variants

tsx

import { Title } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  return (
    <div>
      <Title level="h2" color="default">Default</Title>
      <Title level="h2" color="muted">Muted</Title>
      <Title level="h2" color="primary">Primary</Title>
      <Title level="h2" color="gradient">Gradient</Title>
    </div>
  )
}

Size independent of level

tsx

import { Title } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

// Render an h2 but display it at xs (small body-text size)
export default function Example() {
  return <Title level="h2" size="xs" weight="semibold">Section label</Title>
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */