Section headers
Names a region of a screen: SectionHeader’s five parts over a divider, and SectionLabel, its smaller sibling for one row of a form.
Section headers
Names a region of a screen: SectionHeader’s five parts over a divider, and SectionLabel, its smaller sibling for one row of a form.
Demo
Two subjects: the header’s controls are the sheet’s axes, since its parts take no props; the label’s are real props.
Team members
Manage your team members and their account permissions here.
Parts, not props
SectionHeader is five plain elements: Root, Group, Actions, Heading, and Subheading each take className and their tag’s own attributes, and nothing decides a layout for you. The copied snippet carries the whole tree, including the flex flex-1 flex-col gap-0.5 text block the kit does not ship. SectionLabel.Root is the one part with props of its own.Contextual demo
A section header names what comes under it — that thing is most of the argument. Both families in a settings screen.
This site is also a consumer
preview-shell.tsx renders a SectionHeader.Root with the scenario’s title and description in a hand-written text block and no actions, as the preview’s top heading. The page-headers page stacks this family under its own PageHeader as the everything-below-the-header heading.The family
Seven parts across two exports and two files: SectionHeader with five, SectionLabel with two.
| Component | Description | Import from |
|---|---|---|
| SectionHeader.Root | The wrapper: a column with 20px between its children and a 1px divider 20px under the last of them. | @/components/application/section-headers/section-headers |
| SectionHeader.Group | The content row. A column below 768px and a row from there up, with 16px between the text block and the actions. | @/components/application/section-headers/section-headers |
| SectionHeader.Actions | The slot at the end of the row: a centered flex row with 12px between its children, which are yours. | @/components/application/section-headers/section-headers |
| SectionHeader.Heading | An h2 at 16/24 semibold in text-primary. | @/components/application/section-headers/section-headers |
| SectionHeader.Subheading | A paragraph at 14/20 in text-tertiary, under the heading. | @/components/application/section-headers/section-headers |
| SectionLabel.Root | The form-section label: an h3 title with an optional asterisk and help icon, a description, and a children slot, in two sizes. | @/components/application/section-headers/section-label |
| SectionLabel.Actions | The action row under the description, 12px below it with 8px between its children. Goes in the root’s children slot. | @/components/application/section-headers/section-label |
Built from
Three pieces make up the family; two have their own docs page.
Component | Where it’s used here |
|---|---|
| Tooltip | SectionLabel.Root’s help icon: the kit’s Tooltip with title from tooltip and description from tooltipDescription, around a TooltipTrigger named “More information”. Rendered only when one of the two is set. |
| @untitledui/icons | HelpCircle, the 16px help icon inside the trigger. Decorative: the icon defaults to aria-hidden and the button carries the name. |
Section header
The sheet’s Type axis and booleans as live compositions. The Breakpoint axis is the viewport — narrow the window.
Team members
Manage your team members and their account permissions here.
Notifications
Team members
Manage your team members and their account permissions here.
Team members
Manage your team members and their account permissions here.
Team members
Manage your team members and their account permissions here.
Team members
Manage your team members and their account permissions here.
The sheet’s buttons are size sm
Button at size="sm" is py-2 around a 20px line, 36px. Every demo on this page uses sm, and since the page-headers rebuild (2026-08-28) so does every header consumer in the repo — the old gallery’s md buttons were the one place the docs and the sheet parted.Search and the button group are compositions
Input at size="sm" with icon and shortcut set: read from input.tsx, the chip is hidden md:flex, so it leaves below 768px the way the sheet’s Mobile symbol drops it. The Mobile field is 40px with a 20px icon and 16/24 placeholder, which is size="md"; the demo keeps sm at both widths. The button group’s three segments are the kit’s ButtonGroup at size="sm": px-3.5 py-2, 14px by 8px, 36px tall, which is what the sheet draws.The dots menu is a composition too
dropdownIcon boolean, default true, draws a 20px dots trigger on every Buttons and Button group symbol and never on Search. In code it is the kit’s Dropdown.DotsButton inside a Dropdown.Root as the Group’s last child: md:mt-2 centers the glyph on the 36px buttons the way the symbol’s 8px top inset does, and below md max-md:absolute max-md:top-0 max-md:right-0 pins it to the corner, against the relative the Group already carries. The kit names it “Open menu”; name it for the section it acts on instead.One breakpoint, and it is the window
SectionHeader.Group is flex-col until md:flex-row at 768px, with gap-4 either way. The sheet names Desktop at 1216px and Mobile at 343px and no width between them. The flip is a media query on the viewport rather than the container, so a narrow cell on this page cannot show the column; the contextual demo can.Section label
Two sizes by four carryables: an asterisk, a help icon, a description, and an action row, plus the tooltip states.
Your photo
This will be displayed on your profile.
Your photo (required)
This will be displayed on your profile.
Your photo
This will be displayed on your profile.
Your photo
This will be displayed on your profile.
Your photo
This will be displayed on your profile.
Company logo
Your photo
This will be displayed on your profile.
Your photo (required)
This will be displayed on your profile.
Your photo
This will be displayed on your profile.
Your photo
This will be displayed on your profile.
Your photo
This will be displayed on your profile.
Company logo
Size moves the text and the width, not the asterisk or the actions
sm is a 14/20 semibold title in text-secondary with a 2px gap to its icons, a 14/20 description, and min-w-50, 200px; md is 16/24 with a 4px gap, a 16/24 description, and min-w-60, 240px. The asterisk is text-sm at both, since 2026-08-23, and the action row is mt-3 with gap-2 at both; the link buttons in it are 20px tall whatever the label’s size. Default is sm, which is the sheet’s first symbol.States
Neither family has states of its own. The help button has hover and focus, the asterisk a spoken form. All live.
Your photo
This will be displayed on your profile.
Your photo (required)
This will be displayed on your profile.
Your photo
This will be displayed on your profile.
The help button draws the kit’s focus ring since 2026-08-23
TooltipTrigger sets outline-hidden on it, and the label used to add only a color change on focus: and no name. It now carries aria-label="More information" and, on focus-visible, outline-focus-ring outline-2 outline-solid outline-offset-2. The outline-solid is load-bearing: outline-hidden pins the outline style to none, so a width and color alone would draw nothing. Under forced colors the button is outline-0 at rest and outline-[Highlight] when focused.The minimum width is new
min-w-50 at sm and min-w-60 at md, the sheet’s per-size minimums, read from the source. The sheet’s symbols are also 280px wide, but every one of the four is, at both sizes and with and without actions, which makes it the cell the symbol was drawn in rather than a rule; the kit sets no width and no maximum.