# Heading (/components/typography/heading)
`Heading` renders a semantic section heading. It reads its level from `HeadingLevels` context. Set
`level` to override it directly.
apps/docs/src/examples/heading/basic.tsx
```tsx
import { Heading } from '@luke-ui/react/heading';
export default () => {
return Section heading;
};
```
## Heading level [#heading-level]
Set `base` on the root `HeadingLevels`. Each nested `HeadingLevels` advances the next heading level.
This keeps the document outline aligned with the component structure.
apps/docs/src/examples/heading/automatic-leveling.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Heading, HeadingLevels } from '@luke-ui/react/heading';
export default () => {
return (
Top-level heading (h1)
Nested heading (h2)
Nested again (h3)
);
};
```
Use `level` to override the context for one heading. It does not change the level for siblings or
children.
```tsx
Explicit h2
```
To read the current level in a custom heading-like component, use `useHeadingLevel`. Unlike a nested
`HeadingLevels`, it does not advance the level.
Do not skip levels, such as an h2 followed by an h4. Someone who uses a screen reader navigates a
page by heading level.
## Typography [#typography]
By default, `Heading` maps h1–h4 to `heading1`–`heading4`, h5 to `lead`, and h6 to `body`, and uses
the `heading` font-weight role. Set `typography` to change the visual style without changing the
semantic level. Use `display` for oversized marketing-style headings.
apps/docs/src/examples/heading/typography.tsx
```tsx
import { Heading } from '@luke-ui/react/heading';
import { Comparison, ComparisonItem } from '#docs/comparison';
export default () => {
return (
Example heading
Example heading
Example heading
Example heading
Example heading
Example heading
Example heading
);
};
```
## Related components [#related-components]
Use [Text](/components/typography/text) for prominent content that is not a section heading.
## API [#api]
### HeadingProps [#headingprops]
### HeadingLevelsProps [#headinglevelsprops]
### HeadingLevelsRenderProps [#headinglevelsrenderprops]