Section header components

Powerful and customizable React section header components built for modern applications and websites. These section headers are built using React Aria and styled with Tailwind CSS.

Installation

You can add this section header component using our CLI or manually:

npx untitledui@latest add section-headers

Section header examples

Below are examples and variations of this section header component:

API reference

Import the parts and assemble them:

import { SectionHeader } from "@/components/application/section-headers/section-headers";
import { SectionLabel } from "@/components/application/section-headers/section-label";
 
<SectionHeader.Root>
    <SectionHeader.Group>
        <SectionHeader.Heading />
        <SectionHeader.Subheading />
        <SectionHeader.Actions />
    </SectionHeader.Group>
</SectionHeader.Root>
 
<SectionLabel.Root title="Team members" description="Manage your team members here.">
    <SectionLabel.Actions />
</SectionLabel.Root>

SectionHeader.Actions

Renders a <div> element.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

SectionHeader.Group

Renders a <div> element.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

SectionHeader.Heading

Renders a <h2> element.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

SectionHeader.Root

Renders a <div> element.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

SectionHeader.Subheading

Renders a <p> element.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

SectionLabel.Actions

Renders a <div> element.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

SectionLabel.Root

Renders a <div> element.

SectionLabel.Root props
PropTypeDefaultDescription
title* (required)ReactNode—Heading text rendered as the section's h3.
size
"sm""md"
"sm"Scales the heading and description text.
isRequiredboolean—Shows a brand-colored asterisk after the title to mark the section as required.
descriptionReactNode—Supporting text rendered below the heading.
tooltipstring—Title of the tooltip shown from a help icon beside the heading. Supplying it (or tooltipDescription) reveals the icon.
tooltipDescriptionstring—Body text of the help tooltip beside the heading. Supplying it (or tooltip) reveals the icon.
childrenReactNode—Extra content rendered after the description, typically a SectionLabel.Actions group.
classNamestring—Additional class name for the wrapper.

FAQs

Please refer to our frequently asked questions page for more.

SectionHeader exposes five parts: SectionHeader.Root (the container with the bottom divider), SectionHeader.Group (the title-and-actions row), SectionHeader.Heading, SectionHeader.Subheading, and SectionHeader.Actions for the buttons. A typical header nests Heading and Subheading on the left of a Group and Actions on the right.

Render the tabs as a second child of SectionHeader.Root, directly after SectionHeader.Group. SectionHeader.Root is a vertical flex container with a gap-5, so the Tabs and TabList components drop into place under the title row with the right spacing and above the bottom divider.

SectionHeader.Group is flex-col by default and switches to flex-row at the md breakpoint, so the title block and the action buttons stack vertically on mobile and sit side by side on desktop. SectionHeader.Group is also relative, which lets you absolutely position an overflow menu in the top-right corner on mobile and return it to the flow with md:static.

SectionHeader.Heading renders an h2 styled text-md font-semibold text-primary, and SectionHeader.Subheading renders a p styled text-sm text-tertiary. Both forward every standard prop for their element, so you can pass id, ref, or extra classes; if you need a different heading level for your document outline, render your own element with the same classes.

Use the companion SectionLabel component from section-label.tsx, which ships in the same folder. SectionLabel.Root takes title, description, tooltip, tooltipDescription, isRequired, and a size of "sm" or "md" (defaults to "sm"). Passing tooltip or tooltipDescription renders a help-circle trigger next to the title, and isRequired shows the asterisk. SectionLabel.Actions holds any buttons beneath it.

Yes. Every SectionHeader part — Root, Group, Actions, Heading, and Subheading — accepts a className that is merged with its built-in classes, so you can adjust or override the defaults, for example removing the border-b border-secondary on SectionHeader.Root when the header sits inside a card that already has a divider. SectionLabel.Root is the exception: it has no built-in classes of its own and applies your className directly to its wrapper div, and it does not forward any other div props. SectionLabel.Actions behaves like the SectionHeader parts and merges your className with its own.

Section footersSidebar navigations