Heading

Semantic headings built on Text, with per-level size and weight defaults.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

import { Heading, VStack } from "astralis-ui";

const levels = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;

export function HeadingDemo() {
  return (
    <VStack gap="2" alignItems="start">
      {levels.map((level) => (
        <Heading key={level} as={level}>
          Heading {level}
        </Heading>
      ))}
    </VStack>
  );
}

Import#

import { Heading } from "astralis-ui";

Usage#

as picks the heading level (h1–h6, default h2) and brings a matching default size (4xl → md) and weight (bold for h1–h3, semibold below). Heading also presets the heading font family, tight leading and tight tracking — override any of it with the regular Text props.

Decoupling size from level#

Heading levels are for the document outline; size is for the design. Override size freely without breaking semantics or accessibility.

Visually huge

…but still an h2 in the document outline.

import { Heading, Text, VStack } from "astralis-ui";

export function HeadingSizeOverride() {
  return (
    /* Semantics and visuals are independent: pick the level for the
       document outline, the size for the design. */
    <VStack gap="1" alignItems="start">
      <Heading as="h2" size="6xl" letterSpacing="tighter">
        Visually huge
      </Heading>
      <Text color="muted" size="sm">
        …but still an h2 in the document outline.
      </Text>
    </VStack>
  );
}

Props#

Heading accepts every Text prop except paragraph, plus:

Prop	Type	Default	Description
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h2"`	Heading level; sets the default size and weight.
`size`	Text sizes	per level	`h1` → `4xl`, `h2` → `3xl`, `h3` → `2xl`, `h4` → `xl`, `h5` → `lg`, `h6` → `md`.
`weight`	Text weights	per level	Bold for h1–h3, semibold for h4–h6.