Section header

A lightweight visual divider for use inside forms and settings panels — bold h3 title with an optional muted description.

Personal info

We'll never share these details with anyone else.

Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/section-header.json
Usage
Drop between field groups in a form to create named sections.
TSImport
import { SectionHeader } from "@/components/blocks/section-header";
TSExample
import { SectionHeader } from "@/components/blocks/section-header";

export function Example() {
  return (
    <SectionHeader
      title="Personal info"
      description="We'll never share these details with anyone else."
    />
  );
}
Composition
h3 heading with optional muted description.
SectionHeader
├── size="xs | sm | md | lg | xl"  (md default — text-lg/sm:text-xl; xl matches app-shell page title text-2xl/sm:text-3xl)
├── title                (bold h1 — font-sans, font-bold)
├── description          (optional muted-foreground paragraph below the title)
├── onBack               (optional click handler — renders a circular back button to the left)
├── backLabel            (aria-label for the back button, default "Go back")
└── variant="default | divider"   (divider = muted grey uppercase eyebrow label — no hairline rule)
Default
Title and description together.

Personal info

We'll never share these details with anyone else.

Small
`size="lg"` is text-xl / sm:text-2xl — useful inside cards, empty states, and modals where the default `md` feels light.

Personal info

We'll never share these details with anyone else.

Title only
Omit `description` for a minimal heading divider.

Contact details

With back button
Pass `onBack` to render a circular ghost back button (ArrowLeft) to the left of the title — useful for sub-pages and multi-step flows.

General Information

Help us understand your project better by providing some basic information.

Inside a form
Drop SectionHeader between field groups to create named sections.

Personal info

We'll never share these details with anyone else.

Company

Optional — leave blank if you're an individual.

Inline actions
Pass an `inlineActions` ReactNode to render a control next to the title — typically a `<Button variant="link">View all →</Button>` for grids and tables. Works at any `size`.

Active projects

View all

Recent activity

View all

Everything that's happened in the last 24 hours.

Branded violet titles
Pass `color="violet"` to render the title in Squad violet (`#341756`) in light mode. Works with any `size`. Dark mode falls back to the theme foreground so contrast stays correct.

Personal info

We'll never share these details with anyone else.

Company details

Optional — leave blank if you're an individual.

Active projects

Inter font
Pass `font="sans"` to render the title in Inter instead of the default Albra. Works at every `size` — useful when a section header should match body copy weighting rather than the display face.

Dashboard

Inter — app-shell page title.

Personal info

Inter — default size.

Company details

Inter — small size.

Active projects

Albra font
Pass `font="albra"` to force the literal Albra display face. The default `font="heading"` resolves through the `--font-heading` token, which apps often point at Inter via next/font — so `albra` is the way to guarantee the brand display face on a marquee heading (requires the Albra @font-face to be loaded).

Tell us what you need

Albra — brand display heading.

Personal info

Albra — default size.

Active projects

Muted eyebrow label
Pass `variant="divider"` for a muted grey eyebrow label — small uppercase `text-muted-foreground` text with letter-spacing. Use it above a sub-section block.
Project Types
…content…
Recent activity
…content…
Inline heading
Pass `size="lg"` for a one-line section heading above a grid, table, or panel — no description, no back button.

Active projects

…grid, table, or panel goes here…
API Reference
Props for the SectionHeader component.

SectionHeader

PropTypeDefaultDescription
titlestring—Bold heading text rendered as an h1.
descriptionstring—Optional muted description rendered below the title.
size"xs" | "sm" | "md" | "lg" | "xl""md"Title scale. `xs` text-sm · `sm` text-base/sm:text-lg · `md` text-lg/sm:text-xl · `lg` text-xl/sm:text-2xl · `xl` text-2xl/sm:text-3xl (app-shell page title).
onBack() => void—When provided, renders a circular ghost back button (ArrowLeft) to the left of the title and wraps everything in a flex row.
backLabelstring"Go back"Accessible label for the back button.
font"heading" | "sans""heading"Title font family. `heading` uses Albra (display face); `sans` switches to Inter.
variant"default" | "divider""default"`default` renders the bold heading. `divider` renders a muted grey eyebrow label: small uppercase `text-muted-foreground` text — ignores `size`, `onBack`, `color`, `font`, `description`, and `inlineActions`.
classNamestring—Override or extend the wrapper classes.