Box component for Stripe Apps

Use boxes to wrap other components and add custom styles and layouts.

SDK version

To add the Box component to your app:

Boxes are block-level elements, equivalent to a div HTML element. They support custom styles. If you want to render or style inline elements, see the Inline component.

Loading example...

<Box
 css={{
 padding: 'xxlarge',
 color: 'secondary',
 backgroundColor: 'container',
 borderRadius: 'small',
 }}
>
 This is a box.
</Box>

Box props

CSS

Nesting boxes

For some components, you can use a Box to manage the layout and spacing of their children. For example, nest a Box inside an AccordionItem to add padding:

Loading example...

<Box css={{backgroundColor: 'surface'}}>
 <Accordion>
 <AccordionItem title="Apples">
 <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
 </AccordionItem>
 <AccordionItem title="Bananas">
 <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
 </AccordionItem>
 <AccordionItem title="Peaches" subtitle="A subtitle can be provided">
 <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
 </AccordionItem>
 </Accordion>
</Box>

Custom CSS

The Box component supports custom styles. This example demonstrates usage of the boxShadow property.

Loading example...

<Box css={{stack: 'y', gap: 'large'}}>
 {['boxShadow', 'topShadow', 'focusRing'].map((shadowProp) => {
 return (
 <Box css={{stack: 'y', gap: 'medium'}} key={shadowProp}>
 <Box css={{font: 'heading', fontFamily: 'monospace'}}>
 {shadowProp}
 </Box>
 {['base', 'hover', 'focus', 'top'].map((shadowValue) => (
 <Box key={[shadowProp, shadowValue].join('-')}>
 <Box
 css={{
 font: 'body',
 padding: 'large',
 fontFamily: 'monospace',
 [shadowProp]: shadowValue,
 }}
 >
 {shadowProp}={shadowValue}
 </Box>
 </Box>
 ))}
 </Box>
 );
 })}
</Box>

See also

• Design patterns to follow
• Style your app
• UI testing