Section
Section is the correct way to create page regions and group related content on a page. Use it for settings groups, form sections, sidebar areas, or any time you need visual separation between parts of a page. If you are tempted to use a Card for a page section, use Section instead.
Installation
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
Requires React 19+, base CSS and a Theme provider. See Setup.
Section
Section is the correct way to create page regions and group related content on a page. Use it for settings groups, form sections, sidebar areas, or any time you need visual separation between parts of a page. If you are tempted to use a Card for a page section, use Section instead.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'section' | 'transparent' | 'muted' | 'section' | Background variant applied to the section container. |
| width | SizeValue | Width of the section; a number is interpreted as pixels, a string is used as-is. | |
| height | SizeValue | Height of the section; a number is interpreted as pixels, a string is used as-is. | |
| maxWidth | SizeValue | Maximum width of the section. | |
| minHeight | SizeValue | Minimum height of the section. | |
| children | ReactNode | Content rendered inside the section. | |
| dividers | Array<'top' | 'bottom' | 'start' | 'end'> | Which sides of the section have divider borders. | |
| padding | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 4 | Internal padding using the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Use padding={0} for edge-to-edge content. |
| paddingInline | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Inline (horizontal) padding override. Overrides only the inline-axis padding while preserving block padding from padding or the container theme default. Accepts the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). | |
| paddingInlineStart | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Inline-start padding override (left in LTR, right in RTL). Overrides paddingInline and padding on that edge only. | |
| paddingInlineEnd | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Inline-end padding override (right in LTR, left in RTL). Overrides paddingInline and padding on that edge only. | |
| paddingBlock | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Block (vertical) padding override. Overrides only the block-axis padding while preserving inline padding from padding or the container theme default. Accepts the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). | |
| paddingBlockStart | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Block-start (top) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only. | |
| paddingBlockEnd | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Block-end (bottom) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only. | |
| xstyle | StyleXStyles | StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object. |
Usage guidance
- Use Section for page-level grouping: settings panels, form groups, sidebar regions. These are sections of a page, not discrete items.
- Start with the default variant. Use muted only to call attention to a specific region.
- Add dividers between same-background sections that need separation.
- Combine with a heading + Stack for a typical page section pattern.
- Avoid: Use Card when you mean Section. Cards are for discrete items (one notification, one profile). Sections are for page regions.
Theming API
{
"container": true,
"targets": [
{
"className": "astryx-section",
"visualProps": [
"variant"
]
}
],
"derived": [
{
"property": "padding",
"expand": "container"
}
]
}
Anatomy
- Section container: Painted container that groups a page region.
- Consumer content: Caller-provided content rendered inside the section container.
Examples
- Section — Variants: All three background variants stacked: section (default surface), muted, and transparent. A quick visual reference for choosing the right variant.
- Section — Default with Wash: A default section stacked with a full-width muted section. Shows how muted draws attention to a specific region like an upgrade prompt or banner.
- Section — With Dividers: Adjacent sections separated by bottom dividers, like a settings page. Use dividers when stacking same-variant sections that need visual separation without a background change.
Complete example dependencies
Some examples import optional icons. The per-example install command in the examples list identifies exactly what that example needs. For all examples on this page:
npm install @heroicons/react@2.2.0