Section title

Divide page content into labelled sections

Pairs a heading with a full-width divider line to separate groups of related content. An optional trailing slot can display counts, badges, or other metadata alongside the heading.

Default

Navigation icons

Primary, compact

States

With trailing content

Navigation icons

Status variants

Primary, compact

New

Without divider

Set divider to false above content that draws its own lines, such as bordered tables or calendars, so the heading separates by whitespace alone instead of doubling up the rules.

Upcoming events

Team members

// From the npm package
import { SectionTitle } from 'rift-ds/components/SectionTitle/SectionTitle';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/section-title.json