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.

First name

Last name

Phone

Company

Optional — leave blank if you're an individual.

Company name

Website

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…

Centered

Pass `align="center"` to center the title and description — useful for empty states, modals, and onboarding screens. Ignored when `onBack` is set.

Personal info

We'll never share these details with anyone else.

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

Prop	Type	Default	Description
`title`	string	—	Bold heading text rendered as an h1.
`description`	string	—	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.
`backLabel`	string	"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`.
`align`	"left" \| "center"	"left"	Horizontal alignment of the title and description. Ignored when `onBack` is set.
`className`	string	—	Override or extend the wrapper classes.