Section Header

A lightweight block heading for grouping related content within a page. Lighter than PageHeader — no breadcrumb, smaller type.

Connected accounts

Manage third-party integrations for your account.

import { SectionHeader } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add section-header

Import

import.tsx

import { SectionHeader } from "@aetherstack/patterns"

Usage

section-header.tsx

// Basic
<SectionHeader title="Connected accounts" />

// With description and action
<SectionHeader
  title="Connected accounts"
  description="Manage third-party integrations for your account."
  action={
    <Button variant="outline" size="sm">Add integration</Button>
  }
/>

// Change heading level
<SectionHeader title="Notifications" as="h3" />

Props

Prop	Type	Default	Description
title*	string	—	Section heading text.
description	string	—	Optional sub-text below the title.
action	ReactNode	—	Optional right-aligned element.
as	"h1" \| "h2" \| "h3" \| "h4"	"h2"	Heading element to render.
className	string	—	Additional classes on the wrapper.

* Required