Section

Name: Boreal UI
Author: Davin Chiupka

The Section component defines a semantic page region with optional padding and surface tone.

Usage & Examples

Muted Page Section

Release notesReview the latest product improvements.

muted-page-section.tsx

<Section tone="muted" padded>
  <Stack gap="sm">
    <strong>Release notes</strong>
    <span>Review the latest product improvements.</span>
  </Stack>
</Section>

Props API

Section props API
				Default	Description
`align`	`LayoutAlign`	No	props	`—`	Align prop for LayoutPrimitive.
`as`	`ElementType`	No	props	`—`	As prop for LayoutPrimitive.
`children`	`ReactNode`	No	props	`—`	Content rendered inside the component.
`className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`gap`	`LayoutGap`	No	props	`"md"`	Gap.
`justify`	`LayoutJustify`	No	props	`—`	Justify prop for LayoutPrimitive.
`padded`	`boolean`	No	props	`false`	Padded prop for Section.
`testId`	`string`	No	props	`—`	Test id used to identify the component in tests.
`tone`	`"default" \| "muted" \| "transparent"`	No	props	`"default"`	Tone.