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

PropertyTypeModifiers
padding?number | string—
backgroundColor?string—
color?string—

Box

Properties

Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps & { css?: CSSObject; className?: string; }

Returns

React.JSX.Element

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
View source