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>
  )
}

API Reference

BoxProps

Properties

Property	Type
padding?	`number \| string`
backgroundColor?	`string`
color?	`string`

Box

Properties

props: Props & {
    css?: CSSObject;
    className?: string;
}

Examples

BasicUsage
A practical card-like container using padding and borders.
Box container
Use Box to create simple layout surfaces with padding.
Hover
Using the `useHover` hook to change the color of the `Box` component when hovered.
Hover to highlight this box