Section Header

The heading of a section inside a page, for a card or a table: a title, a description and actions on the right.

Blockv0.1.0experimentalWCAG 2.2 AAView spec

A ready-made piece, built from the library's own parts.

A block puts several components together into something you would otherwise assemble by hand. It never fetches data: you give it the data, or answer its callbacks. It is copied into your project like any component, with the parts it uses, so you can change anything.

Basic

Full screen

Recent invoices

The last ten, newest first.

With divider

Full screen

Team members

People who can sign in to this workspace.

The table or form for this section goes here.

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add section-header

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/section-header.json

Works, but without upgrade tracking.

Usage

import { Button, SectionHeader } from "@rdloom/react";

<div className="flex min-h-[12rem] w-full items-center justify-center">
  <div className="w-full max-w-3xl">
    <SectionHeader title="Recent invoices" description="The last ten, newest first." actions={<Button variant="secondary" size="sm">View all</Button>} />
  </div>
</div>

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`title`required The section's title, shown as an h2 by default.	`node`	none
`headingLevel` Heading level of the title, 2 to 6.	`number`	`2`
`description` One sentence under the title.	`node`	none
`actions` Buttons or a menu for the right of the title.	`node`	none
`size` compact for pages with little room, such as a side panel or a dense admin screen.	`"default" \| "compact"`	`"default"`
`divider` Draw a line under the header.	`boolean`	`false`
`classNames` Extra class names for single parts, so you can restyle one part without editing the file. Keys: root, title, description, actions.	`Partial<Record<"root" \| "title" \| "description" \| "actions", string>>`	none

Accessibility

Role none, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Tab: moves through the actions

Screen readers announce

"Recent invoices, heading level 2"

What your code must do

The title is a real heading below the page's h1, so the page has a clear outline
Actions wrap under the title on a narrow screen

Block contract

Data: A title, and an optional description and actions.
Data states: ready
Permissions: None yet
Events: None
You can replace: classNames for each part; actions slot

Guidelines

Use it when

Above a card, a table or a form section inside a page

Avoid it when

The top of a page: use PageHeader

Don't

Skipping heading levels (an h4 straight under the h1)

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-text-default
--rd-color-text-muted
--rd-color-border-default