XDSSection@xds/core · Section
Preview coming soon

Usage

Section is a container that is used to create visual separation. Use the default variant for standard content (white), wash to emphasize or group related content (gray), and transparent for no background while still using Section's padding and dividers.

Best practices

GuidancePractices
DoStart with the default variant. Use wash only to call attention to a specific region.
DoAdd dividers between same-background sections that need separation.

Import

ts
import {XDSSection} from '@xds/core/Section'

Props

PropTypeDescription
variant
'section' | 'transparent' | 'wash' (default: 'section')Background variant applied to the section container.
width
SizeValueWidth of the section; a number is interpreted as pixels, a string is used as-is.
height
SizeValueHeight of the section; a number is interpreted as pixels, a string is used as-is.
maxWidth
SizeValueMaximum width of the section.
minHeight
SizeValueMinimum height of the section.
children
ReactNodeContent rendered inside the section.
dividers
Array<'top' | 'bottom' | 'start' | 'end'>Which sides of the section have divider borders.
padding
SpacingStep (default: 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.
xstyle
StyleXStylesStyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object.

Examples

Common configurations, variations, and states.
Section — Default with WashA default section stacked with a full-width wash section. Shows how wash draws attention to a specific region like an upgrade prompt or banner.
tsx
'use client';
​
import {XDSSection} from '@xds/core/Section';
import {XDSStack} from '@xds/core/Layout';
import {XDSHeading, XDSText} from '@xds/core/Text';
import {XDSButton} from '@xds/core/Button';
import {XDSIcon} from '@xds/core/Icon';
import {CheckIcon} from '@heroicons/react/24/solid';
​
const FEATURES = [
  '10 team members',
  'Unlimited projects',
  'Priority support',
  'Advanced analytics',
];
​
export default function SectionDefaultWithWash() {
  return (
    <XDSStack direction="vertical" gap={0}>
      <XDSSection variant="section" padding={5}>
        <XDSStack direction="vertical" gap={3} hAlign="center">
          <XDSStack direction="vertical" gap={1} hAlign="center">
            <XDSText type="display-3">Pro Plan</XDSText>
            <XDSText type="body" color="secondary">
              Everything you need to scale your team.
            </XDSText>
          </XDSStack>
          <XDSStack direction="vertical" gap={2}>
            {FEATURES.map(feature => (
              <XDSStack
                key={feature}
                direction="horizontal"
                gap={2}
                vAlign="center">
                <XDSIcon icon={CheckIcon} size="sm" />
                <XDSText type="body">{feature}</XDSText>
              </XDSStack>
            ))}
          </XDSStack>
        </XDSStack>
      </XDSSection>
      <XDSSection variant="wash" padding={5}>
        <XDSStack direction="vertical" gap={2} hAlign="center">
          <XDSStack direction="horizontal" gap={1} vAlign="end">
            <XDSHeading level={3}>$49</XDSHeading>
            <XDSText type="supporting" color="secondary">
              /month
            </XDSText>
          </XDSStack>
          <XDSButton label="Upgrade" variant="primary" />
        </XDSStack>
      </XDSSection>
    </XDSStack>
  );
}
Section — With DividersAdjacent sections separated by bottom dividers, like a settings page. Use dividers when stacking same-variant sections that need visual separation without a background change.
tsx
'use client';
​
import {XDSSection} from '@xds/core/Section';
import {XDSStack} from '@xds/core/Layout';
import {XDSHeading, XDSText} from '@xds/core/Text';
​
export default function SectionWithDividers() {
  return (
    <XDSStack direction="vertical" gap={0}>
      <XDSSection variant="section" padding={5} dividers={['bottom']}>
        <XDSStack direction="vertical" gap={1}>
          <XDSHeading level={4}>Account</XDSHeading>
          <XDSText type="body" color="secondary">
            Manage your profile, email, and password.
          </XDSText>
        </XDSStack>
      </XDSSection>
      <XDSSection variant="section" padding={5} dividers={['bottom']}>
        <XDSStack direction="vertical" gap={1}>
          <XDSHeading level={4}>Notifications</XDSHeading>
          <XDSText type="body" color="secondary">
            Choose what updates you receive and how.
          </XDSText>
        </XDSStack>
      </XDSSection>
      <XDSSection variant="section" padding={5}>
        <XDSStack direction="vertical" gap={1}>
          <XDSHeading level={4}>Privacy</XDSHeading>
          <XDSText type="body" color="secondary">
            Control who can see your activity and data.
          </XDSText>
        </XDSStack>
      </XDSSection>
    </XDSStack>
  );
}

Showcase source

tsx
'use client';
​
import {XDSSection} from '@xds/core/Section';
import {XDSStack} from '@xds/core/Layout';
import {XDSText} from '@xds/core/Text';
import * as stylex from '@stylexjs/stylex';
import {colorVars} from '@xds/core/theme/tokens.stylex';
​
const styles = stylex.create({
  transparentWrapper: {
    backgroundColor: colorVars['--color-background-blue'],
  },
});
​
export default function SectionVariants() {
  return (
    <XDSStack direction="vertical" gap={0}>
      <XDSSection variant="section" padding={5}>
        <XDSStack direction="vertical" gap={1}>
          <XDSText type="body" weight="bold">
            Section
          </XDSText>
          <XDSText type="supporting" color="secondary">
            White background.
          </XDSText>
        </XDSStack>
      </XDSSection>
      <XDSSection variant="wash" padding={5}>
        <XDSStack direction="vertical" gap={1}>
          <XDSText type="body" weight="bold">
            Wash
          </XDSText>
          <XDSText type="supporting" color="secondary">
            Gray background.
          </XDSText>
        </XDSStack>
      </XDSSection>
      <XDSStack direction="vertical" xstyle={styles.transparentWrapper}>
        <XDSSection variant="transparent" padding={5}>
          <XDSStack direction="vertical" gap={1}>
            <XDSText type="body" weight="bold">
              Transparent
            </XDSText>
            <XDSText type="supporting" color="secondary">
              No background, shows the color behind it.
            </XDSText>
          </XDSStack>
        </XDSSection>
      </XDSStack>
    </XDSStack>
  );
}