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.
<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>
Styles
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 </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.