ui/components/section-header

Section Header

Uppercase heading element for labeling content sections, with configurable heading level and variant.

Preview

tsx

1 import { SectionHeader } from "@/components/ui/section-header";2 3 export default function SectionHeaderDefault() {4   return (5     <div className="max-w-md">6       <SectionHeader as="h2" bordered className="mb-3">7         Review Findings8       </SectionHeader>9       <p className="mb-6 text-sm leading-relaxed text-muted-foreground">10         Three findings across two files. Severity comes from the analyzer, not from the diff size.11       </p>12 13       <SectionHeader className="mb-2">Blocking</SectionHeader>14       <p className="text-sm leading-relaxed text-muted-foreground">15         The retry loop swallows the original rejection, so the failing request is never reported.16       </p>17     </div>18   );19 }20

Installation

$pnpm exec dgadd add ui/section-header

[Installs to]src/components/ui/section-header[Item]ui/section-header

dgadd ships in @diffgazer/add on npm: pnpm add -D @diffgazer/add puts it on pnpm exec, and npx @diffgazer/add runs it without the install.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS from the installed package.

Usage

tsx

1 import { SectionHeader } from "@/components/ui/section-header";2 3 export default function SectionHeaderDefault() {4   return (5     <div className="max-w-md">6       <SectionHeader as="h2" bordered className="mb-3">7         Review Findings8       </SectionHeader>9       <p className="mb-6 text-sm leading-relaxed text-muted-foreground">10         Three findings across two files. Severity comes from the analyzer, not from the diff size.11       </p>12 13       <SectionHeader className="mb-2">Blocking</SectionHeader>14       <p className="text-sm leading-relaxed text-muted-foreground">15         The retry loop swallows the original rejection, so the failing request is never reported.16       </p>17     </div>18   );19 }20

Examples

Variants

Preview

tsx

1 import { SectionHeader } from "@/components/ui/section-header";2 3 export default function SectionHeaderVariants() {4   return (5     <div className="flex flex-col gap-8">6       <div className="flex flex-col gap-3">7         <SectionHeader as="h2">Level h2 — section title</SectionHeader>8         <SectionHeader as="h3">Level h3 — default label</SectionHeader>9         <SectionHeader as="h4">Level h4 — smallest label</SectionHeader>10       </div>11 12       <div className="flex flex-col gap-3">13         <SectionHeader variant="default">Default tone</SectionHeader>14         <SectionHeader variant="muted">Muted tone</SectionHeader>15         <SectionHeader variant="accent">Accent tone</SectionHeader>16       </div>17 18       <div className="max-w-md">19         <SectionHeader as="h2" bordered className="mb-2">20           Bordered21         </SectionHeader>22         <p className="text-sm leading-relaxed text-muted-foreground">23           The bottom border turns the label into a section boundary above its content.24         </p>25       </div>26     </div>27   );28 }29

API Reference

SectionHeader

Name	Type	Default	Description
as	"h2" \| "h3" \| "h4"	"h3"	Heading level. Choose the level that matches your document outline.
variant	"default" \| "muted" \| "accent"	"default"	Color intensity. Default uses foreground, muted uses muted-foreground, accent uses the theme accent.
bordered	boolean	false	Adds a bottom border under the heading.
children	ReactNode	—	Heading text.

Accessibility

Notes

Variant

The variant prop controls visual intensity. Default uses foreground color, muted uses muted-foreground, and accent uses the theme accent for a highlighted section label.

Heading Level

The as prop renders as h2, h3, or h4 (defaults to h3). Each level carries its own size, weight, and letter-spacing so the three read as a scale: h2 is the largest and tightest, h4 the smallest and widest-tracked.

Spacing

SectionHeader owns no outside margin. The layout that places the header decides the gap below it (for example mb-2 next to body copy, or a flex gap in a stacked panel).

Source

Install via CLI: pnpm exec dgadd add ui/section-header.

Highlighted source loads after this disclosure opens. Browse the source repository.