patterns

PanelSectionHeading

Canonical section heading inside a `<DetailPanel>`. Sized one step above body so the hierarchy reads correctly: 24px panel title → 16px section heading → 14px body.

Project rule: no bold inside prose. PanelSectionHeading exists so you don't reach for inline `<strong>` to compensate for too-small section titles.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/panel-section-heading.json

Or import from the workspace package:

import { PanelSectionHeading } from "@8maverik8/design";

Examples

Default

Configuration

<PanelSectionHeading>Configuration</PanelSectionHeading>

Guidelines

Use this for every section title inside a DetailPanel body.
Roll a local SectionHeading or `<h3 className="font-semibold">` instead.If we ever change the panel-heading scale, hand-rolled headings won't follow.