Section Number
Open Source
NewFunctional scholarly section address with bounded chrome depth and an explicit content-depth escape.
API and behavior
Compound exports, owned slots, interaction law, and family hook routing.
- Required props
children- Optional props
number + addressTargetaddressContext- Controlled props
- None
- Companion exports
SectionNumber- Owned data-slot contract
section-numbersection-number-labelsection-number-heading
Motif route
MOTIF_REGISTRY.section-number → apparatusTarget('section-number')
Keyboard
Numbered addresses are native links; unnumbered headings add no focus target.
Accessibility
Chrome addresses stop at two levels; deeper content requires addressContext='content'.
Family hooks
Journal consumes section-number, heading-weight, address, and section-rule hooks.
top-level numberedunnumbereddeep content addressInstallation
npx shadcn@latest add @substrateui/section-number --yesUpgrading a project that installed base before F1? Refresh the shared hooks first:
npx shadcn@latest add @substrateui/base --yes --overwritenpm Dependencies
npm install class-variance-authorityTags
journalsectionheadingaddress