Stack

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

<Stack gap={1}>
	<Box background="shade" padding={1} />
	<Box background="shade" padding={1} />
	<Box background="shade" 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.

<Stack as="section" gap={1}>
	<Box background="shade" padding={1} />
	<Box background="shade" padding={1} />
	<Box background="shade" 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.