Section Heading

Layout

An eyebrow, title, and description block for page sections.

SectionHeading pairs a small uppercase eyebrow with a title and supporting copy, optionally centered for hero areas.

npx shadcn@latest add section-heading

Default & centered

Preview

Live

Foundations

Color

A single indigo primary that scales from light to dark mode.

Foundations

Typography

A restrained type scale built on Geist.

tsx

1<SectionHeading
2  eyebrow="Foundations"
3  title="Color"
4  description="A single indigo primary that scales across modes."
5/>
6
7<SectionHeading
8  eyebrow="Foundations"
9  title="Typography"
10  description="A restrained type scale."
11  align="center"
12/>

With an icon

eyebrow is just a node, so it can hold a small icon too.

Preview

Live

Layout primitives

Compose them together

Stack, Grid, and Flex cover most of the spacing you will need.

tsx

1<SectionHeading
2  eyebrow={
3    <span className="flex items-center gap-1.5">
4      <Layers className="size-3.5" />
5      Layout primitives
6    </span>
7  }
8  title="Compose them together"
9  description="Stack, Grid, and Flex cover most of the spacing you need."
10/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
eyebrow	string	A small label above the title.
title	React.ReactNode	The section title.
description	React.ReactNode	Supporting copy under the title.
align	"left" \| "center"= "left"	Text alignment of the heading.