DetailHeader

Header of a record screen (an applicant, a person, a student): picture, name, status, facts and actions in one block. It is the record’s heading, not the page’s: keep the page title in PageHeader and put this under it, or let it be the first thing of a detail pane.

Import

import { DetailHeader } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/detail-header.

Usage

<DetailHeader
  name="Ana Torres"
  subtitle="Applicant 2041 · Grade 3"
  avatar={<Avatar name="Ana Torres" size="lg" className="size-14 text-fs-150" />}
  status={<Chip tone="warning">In review</Chip>}
  actions={<>
        <Button variant="secondary">Request documents</Button>
        <Button>Approve</Button>
      </>}
  facts={<Facts>
        <div>
          <dt>Guardian</dt>
          <dd>Rosa Quispe</dd>
        </div>
        <div>
          <dt>Applied</dt>
          <dd>12 Oct 2026</dd>
        </div>
        <div>
          <dt>Previous school</dt>
          <dd>San Martín</dd>
        </div>
      </Facts>}
/>

Props

Prop	Type	Default	Description
name *	ReactNode		The record’s name: the heading of the header.
avatar	ReactNode		Picture slot before the name, usually an Avatar (pass className="size-14" for a larger one).
subtitle	ReactNode		Line under the name: a role, a code, a relationship.
status	ReactNode		Status next to the name: a Chip or StatusPill. Wraps under the name when narrow.
facts	ReactNode		Key facts row under the header, usually a Facts list.
actions	ReactNode		Buttons for the record. They wrap under the name when the header’s own width is 480px or less.
headingLevel	2 | 1 | 4 | 3 | 5 | 6	2	Level of the name heading. Defaults to 2, the level under the page’s h1.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Name Only
• Narrow

Source

packages/ui/src/containers/detail-header/detail-header.tsx