<VStack gap={2}>  <Heading textStyle="h1">Page Title</Heading>  <Heading textStyle="h2">Section Title</Heading>  <Heading textStyle="h3">Subsection</Heading></VStack>

Usage

import { Heading } from "@reva/ui";

Heading renders an <h4> by default. The textStyle prop applies a complete, named type style in one step — keeping titles consistent without hand-tuning size, weight, tracking, and leading individually. The hero1–hero4 recipes are a distinct sub-family in the serif brand font for marketing and editorial hero surfaces.

When textStyle is omitted, the recipe is derived from the as heading level, so <Heading as="h1"> still looks like an h1; a bare <Heading> is an h4. The as prop also accepts common semantic text elements (p, span, div, strong, em, small, mark, label, figcaption, blockquote, legend) for cases where Heading's display typography is wanted without a heading landmark — pair it with textStyle to keep the look while changing the tag, e.g. <Heading textStyle="h1" as="p"> for a stat value.

The granular size, weight, tracking, and leading props override individual facets of the recipe.

Examples

Text styles

Each textStyle is a ready-made heading style — pick a level and its size, weight, tracking, and leading come as a set.

<VStack gap={3}>  <Heading textStyle="h1">The personal CFO for business owners</Heading>  <Heading textStyle="h2">Build wealth that grows, with you</Heading>  <Heading textStyle="h3">Make smarter calls, with less effort</Heading>  <Heading textStyle="h4">Forecast your future</Heading>  <Heading textStyle="h5">Connect your accounts</Heading>  <Heading textStyle="h6">Keep you on track</Heading></VStack>

Hero

Hero recipes switch to the serif brand font, bold by default, with tight leading and tracking, a deliberately editorial register, distinct from the common product headings. Reserve them for marketing and hero surfaces; they read oversized on dense product pages. A bare hero renders an <h1> landmark; override with as (e.g. as="p" for a decorative display line). Re-weight with the weight prop just like any other recipe.

<VStack gap={4}>  <Heading textStyle="hero1">Your personal CFO</Heading>  <Heading textStyle="hero2">Your personal CFO</Heading>  <Heading textStyle="hero3">Your personal CFO</Heading>  <Heading textStyle="hero4">Your personal CFO</Heading></VStack>

Weights

Re-weight any recipe with the weight prop without changing its size, tracking, or leading.

<VStack gap={2}>  <Heading weight="normal">Normal</Heading>  <Heading weight="medium">Medium</Heading>  <Heading weight="semibold">Semibold</Heading>  <Heading weight="bold">Bold</Heading></VStack>

Overriding size

Use the size prop to override the recipe's size while keeping its other facets. The override always wins (textStyle="h1" + size="lg" renders at lg).

<VStack gap={2}>  <Heading textStyle="h3" size="5xl">h3 recipe at 5xl</Heading>  <Heading textStyle="h1" size="lg">h1 recipe at lg</Heading></VStack>

Non-heading element

Render Heading's display typography on a non-heading tag when you need the look of a heading without the landmark semantics — for example, a large stat value paired with a label.

<VStack gap={1} align="start">  <Text textStyle="caption1" color="muted-foreground">AUM</Text>  <Heading textStyle="h1" as="p">£51.54m</Heading></VStack>

Props