View Sourceimport { Box } from 'components'

Box

Box is the base component that other components can be built from. It is responsible for converting style props into CSS rules.

import { Box, Stack } from 'components'

export default function Example() {
  return (
    <Stack
      width="100%"
      height="100%"
      alignItems="center"
      justifyContent="center"
    >
      <Box padding={16} backgroundColor="tomato" color="white">
        Hello Box
      </Box>
    </Stack>
  )
}
Hello Box

Guidelines

These guidelines are an example of how importing MDX works. Components like Box are supported as well for things like overriding inline text.

Props

Box

View Source

as

string

children

React.ReactNode

padding

string | number

backgroundColor

string

color

string

style

React.CSSProperties

Examples