Skip to content
Aback UI

Application

Section Heading

The eyebrow, title, description, and action that open a page section.

BetaUsed in Aback Tools, Aback Launch, Aback GroupRegistry JSON (opens in a new tab)

Catalogue

Every product we ship

Live products, public betas, and what is coming next.

View all components

Pricing

Start free. Upgrade when it pays for itself.

Every plan includes the full component library.

Related tools

More converters for images.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add section-heading

Writes components/ui/section-heading.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import { SectionHeading } from "@/components/ui/section-heading";

API reference

Props and composition points for Section Heading. Native element props pass through.

PropTypeDefaultDescription
titleReactNodeNoneThe section heading. Required.
eyebrow / descriptionReactNodeNoneA short brand-coloured label above the title and a sentence below it.
actionReactNodeNoneA link or button for the section, such as View all. It moves to the right from md.
as"h2" | "h3" | "h4""h2"The heading level. Keep the outline in order under the page's h1.
size / align"sm" | "default" | "lg" / "start" | "center""default" / "start"Title scale and alignment. Centre is for marketing sections, start for product pages.
headingIdstringNoneAn id for the heading, so the wrapping section can use aria-labelledby.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • Renders a real heading at the level you choose, so the page outline stays navigable.
  • Pair it with a section labelled by headingId to create a named region.
  • The eyebrow uses the link token, which meets text contrast in both themes.
  • Use PageHeader for the page's h1. SectionHeading is for everything below it.

Used in production

The Aback products whose interfaces shaped this component.

Related