Heading
Accessible document title headings with automated slug anchors.
The Heading primitive is a wrapper element that renders HTML title headings (<h1> through <h6>) and automatically attaches anchor copy-to-clipboard links when an id is provided.
Quick Start
Render a heading with automated anchor link wrapping:
import { Heading } from 'boltdocs/primitives'
export default function SectionHeader() {
return (
<Heading
level={2}
id="project-architecture"
className="text-2xl font-bold text-body border-b border-subtle pb-2"
>
Project Architecture
</Heading>
)
}
Anchor Positions
You can customize where the Lucide anchor link icon appears:
Wrap Position (Default)
Wraps the entire text content inside a local router hyperlink, rendering the link icon at the trailing edge on hover.
Before / After Positions
Renders the link icon as a standalone prefix or suffix:
<Heading level={3} id="options" anchorPosition="before">
Configuration Options
</Heading>
Component Props
The Heading component accepts standard HTML heading attributes plus:
| Property | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | Required | Renders the corresponding HTML heading element (e.g., 1 outputs <h1>). |
id | string | undefined | Unique section slug identifier. Required to enable the anchor link. |
showAnchor | boolean | true | Toggles whether anchor glyphs should be displayed on hover/click. |
anchorPosition | 'wrap' | 'before' | 'after' | 'wrap' | Determines the layout orientation of the link icons. |
anchorIcon | ReactNode | LucideLink | Custom SVG graphic component to override the default link glyphs. |
anchorClassName | string | undefined | Custom style overrides for the wrapping anchor link element. |
className | string | undefined | CSS class style override for the heading. |
style | CSSProperties | undefined | Inline style settings. |
Customization & states
Heading renders a semantic heading tag (h1–h6) and, when an id is present, wraps the content in an anchor link. It has no interactive state of its own — typography, spacing, and borders come from the theme through className (the heading) and anchorClassName (the anchor link wrapper).
| State / Slot | Mechanism |
|---|---|
className | Passthrough to the rendered <h1>–<h6>; theme controls type, size, spacing, borders |
anchorClassName | Passthrough to the anchor link wrapper (defaults to a link icon shown on hover) |
level | 1–6, structural only — no visual state |
id + showAnchor | Enables the anchor link; anchorPosition picks wrap / before / after |
| No state | No data-* attributes or interaction states |
Tailwind v4:
<Heading
level={2}
id="overview"
className="group text-2xl font-bold text-body border-b border-subtle pb-2"
anchorClassName="text-muted/50 hover:text-primary-500"
>
Overview
</Heading>
