Agriculture Design System
Design System for the Export Service


A primitive layout component.

View in StorybookView in Github
import { ... } from '@ag.ds-next/react/box';

The Box component is a primitive layout component that is heavily used to build other components. It can also be used to create custom layouts and components in your application.

Open in Playroom, opens in a new tab
<Box>A simple Box</Box>

The ‘as’ prop

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

<Box as="section">A simple Box rendered as a section element</Box>


Apply styles like padding, border radius, background color and more by using available props. Here’s a small example:

<Box background="shade" border padding={1} rounded>
	A Styled Box

Responsive props

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

  • Flex A CSS flexbox version of the Box component.
  • Stack Stack is a primitive layout component used to distribute items vertically with even spacing.