Box

Box is the base primitive component on top of which all other components are built. By default, it renders a div element. When building any new layout elements or components, you'll almost always go for a Box to start with. There are some other components that are in the same category of "primitives": Flex, Grid, Text.

Import


import { Box } from '@stacks/ui';import { Box } from '@stacks/ui';

Usage


<Box w="100%" p={space('base')} color="white" bg="salmon">
  Box is the base element all others are created from.{' '}
  <Box as="span" bg="white" color={themeColor('ink.900')}>
    It can also be inline.
  </Box>
</Box><Box w="100%" p={space('base')} color="white" bg="salmon">  Box is the base element all others are created from.{' '}  <Box as="span" bg="white" color={themeColor('ink.900')}>    It can also be inline.  </Box></Box>

as prop

You can use the as prop to change which element is rendered. You can pass a string of a dom element, or you can pass another React component.


<>
  {/* Box as a button! */}
  <Box as="button" rounded="md" bg="salmon" color="white" px={space('base')} height={12}>
    Button
  </Box>
  {/* Box as Flex for recreating a button */}
  <Box
    rounded="md"
    bg={themeColor('blue')}
    _hover={{
      bg: themeColor('blue.hover'),
      cursor: 'pointer',
    }}
    color="white"
    px={space('base')}
    mt={space('base')}
    height="64px"
    as={Flex}
    alignItems="center"
    justifyContent="center"
  >
    Button
  </Box>
</><>  {/* Box as a button! */}  <Box as="button" rounded="md" bg="salmon" color="white" px={space('base')} height={12}>    Button  </Box>  {/* Box as Flex for recreating a button */}  <Box    rounded="md"    bg={themeColor('blue')}    _hover={{      bg: themeColor('blue.hover'),      cursor: 'pointer',    }}    color="white"    px={space('base')}    mt={space('base')}    height="64px"    as={Flex}    alignItems="center"    justifyContent="center"  >    Button  </Box></>

Search docs

⌘

On this page