Skip to main content
Section.Root groups related content. Section.Header combines Heading with a description and optional actions content. Descriptions are ordinary text associated with the heading, so they do not add levels to the document outline.

​
Usage

​
Add a description and action

Section.Root defaults to a full-width div with left alignment and the primary text color. Use align, color, and fullWidth to adjust the content wrapper. Section.Header can also be used by itself. Its level, size, and color configure the heading and default to 2, md, and primary. The header has one spacing-4 margin after it. Use native style or className to adjust that spacing.

​
Description overflow

String descriptions show up to five lines. Set descriptionLineClamp to a positive integer to choose another limit, or false to display the full description without an overflow tooltip. Hover reveals overflowing text. Descriptions do not add a tab stop by default; set isDescriptionFocusable to enable focus access to the tooltip. Escape dismisses the tooltip. The heading accepts node content. Choose level for the document outline independently of visual size and color. Compose links and other rich content explicitly in a node description. Pass a React node for richer supporting content. Rich descriptions render as supplied, without automatic truncation or tooltips.

​
Composition

Both parts forward native attributes, refs, class names, styles, and render to their outer element. For example, Section.Root render={<section aria-label="Workspace settings" />} provides a named section, and Section.Header render={<header />} uses a header container. When migrating, replace adornment with actions. Opt into description focus with isDescriptionFocusable when needed. SectionRootProps and SectionHeaderProps are exported from twenty-ui/components/layout.

​
Props

​
Section.Root

​
"center" | "left"
default:"left"
Text alignment within the section. Defaults to left.
​
"primary" | "secondary" | "tertiary"
default:"primary"
Text color within the section. Defaults to primary.
​
boolean
default:"true"
Whether the section fills the available width. Defaults to true.
​
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

​
Section.Header

​
ReactNode
Content alongside the heading, such as an action button or status.
​
"primary" | "secondary" | "tertiary"
default:"primary"
Theme font color. Defaults to primary.
​
ReactNode
Supporting text associated with the heading. Strings have optional truncation and overflow tooltips; React nodes render as supplied.
​
number | false
default:"5"
Maximum visible lines for a string description. Defaults to 5; use false to display the full description without a tooltip.
​
boolean
default:"false"
Adds a tab stop to a truncated string description so its overflow tooltip can open on focus. Defaults to false.
​
1 | 2 | 3 | 4 | 5 | 6
default:"2"
Semantic heading level, from h1 through h6. Does not change the visual size. Defaults to 2.
​
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.
​
"lg" | "md" | "sm" | "xl" | "xs" | "xxl"
default:"md"
Visual font size from xs through xxl, independent of the heading level. Uses the matching font token. Defaults to md.
​
ReactNode
required
Content of the section heading.