Heading
headingRenders semantic heading levels with independently configurable visual size and weight.
Usage
Sixth level title
level determines both the semantic label h{level} and the default visual size.
First level title
Second level title
Level 3 heading
Level 4 heading
<Heading level={1}>First-level title</Heading>
<Heading level={2}>Level 2 title</Heading>
<Heading level={3}>Level 3 title</Heading>
<Heading level={4}>Level 4 title</Heading>Font weight
weight provides normal/medium/semibold/bold and defaults to semibold.
General
Medium
Half thick
bold
<Heading level={3} weight="normal">General</Heading>
<Heading level={3} weight="medium">Medium</Heading>
<Heading level={3} weight="semibold">Semi-coarse</Heading>
<Heading level={3} weight="bold">Bold</Heading>Visual/Semantic Decoupling
size independently overrides visual dimensions, decoupled from level semantics (h2 tag renders lg dimensions).
The semantic is h2 and the visual is lg
<Heading level={2} size="lg">The semantic is h2, the visual is lg</Heading>Cover tag + balanced line wrapping
as overrides the render tag, balance enables text-balance to make multi-line titles more proportional.
<Heading level={1} as="div" balance>
Large visual title rendered with div, balance balanced line wrapping enabled
</Heading>When to use
Use Heading for semantic h1–h6 structure with separately controlled visual size and weight. For example, keep h2 semantics while using an lg appearance, or use as to apply heading styles to another element. Use Text for body copy and Prose for complete rich-text typography.
Import
import { Heading } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Title level, determines semantic label h{level} and default visual size |
| as | ElementType | h{level} | Override rendering tags (visual/semantic decoupling, such as level=1 style rendering as div) |
| size | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | derived by level | Override visual size (independent of level) |
| weight | "normal" | "medium" | "semibold" | "bold" | "semibold" | Font weight |
| balance | boolean | false | Enable text-balance to balance line wrapping (multi-line titles are more balanced) |
Inherited HTMLAttributes<HTMLHeadingElement> (Omit color).
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | title text |
Usage guidelines
level determines both semantics and the default size. Override size to change appearance without damaging the document outline; do not change level for visual reasons. Heading has no size="md" option, only the base size, for historical compatibility.
Related
Text · Prose · Markdown · AuroraText · AnimatedShinyText · AnimatedGradientText
Playground
Hulian Heading Title
<Heading level={2}>Hulian Heading Title</Heading>