<Box />

The Main component allowing you to define an entire layout of the application. It is one of the most powerful tools in the Design System. Thanks to multiple BoxProps it can serve as the main wrapper for your content or as the layout building block.


import { Box } from '@admin-bro/design-system'


Apart from the props extended by the @styled-system:

it introduced 3 new props: flex, variant, animate. See BoxProps for more details.


One of the most used cases is to use Box as a flex container. Let me give you an example of how to do this with flex prop.

Other examples

  1. Simple White/Gray wrapper

  1. Positioning buttons


View Source admin-bro-design-system/src/atoms/box/box.tsx, line 37

Type Definitions


# BoxProps

Prop Types of a Box component. Apart from those defined below it extends all


import { BoxProps } from '@admin-bro/design-system'
Name Type Attributes Description
... string <optional>

Other props from SpaceProps, ColorProps, LayoutProps, FlexboxProps, PositionProps and BorderProps.

flex FlexboxFlexProp <optional>

If box should be rendered as flex. You can pass boolean or FlexboxProps['flex']

variant 'grey' | 'white' | 'card' <optional>

Box variants

animate boolean <optional>

If set to true it makes css changes as 500ms transitions

className string <optional>

Optional class name passed down to the wrapper

View Source admin-bro-design-system/src/atoms/box/box.tsx, line 68


Proudly built and maintained by SoftwareBrothers

Software House with a passion for both JavaScript and TypeScript.

See what we do See what we believe in

Proudly built and maintained by