Stack

import { ... } from '@ag.ds-next/react/stack';

/* highContrastOutline outline added for demo purposes only */
<Stack gap={1}>
	<Box background="shade" highContrastOutline padding={1} />
	<Box background="shade" highContrastOutline padding={1} />
	<Box background="shade" highContrastOutline padding={1} />
</Stack>

The ‘as’ prop

By default, the Stack component renders an HTML <div> element. You can render it with a different HTML element tag by using the as prop.

/* highContrastOutline outline added for demo purposes only */
<Stack as="section" gap={1}>
	<Box background="shade" highContrastOutline padding={1} />
	<Box background="shade" highContrastOutline padding={1} />
	<Box background="shade" highContrastOutline padding={1} />
</Stack>

Box props

Stack supports all of the BoxProps from the box component (except for display). For more information, see Box props.

Responsive props

The Stack component supports the responsive prop syntax on most props. For more information about responsive props, see our documentation for Breakpoints.

Related components

• Box – A primitive layout component.
• Flex – A CSS flexbox version of the Box component.
• Form stack – The Form stack component is used to apply consistent vertical spacing between elements in forms.