# Section

- Page: https://jiguang132.com/resources/astryx/docs/section
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

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

```bash
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](/resources/astryx/docs/getting-started).

## 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

```json
{
  "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:

```bash
npm install @heroicons/react@2.2.0
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt