Box

Based on the Chakra UI-component Box, an abstract component on top of which all Chakra UI components are built.

Component usage

Box is useful for of applying basic styles, layout and behaviours. Both for the element itself and its children.

import { Box, ThemeColor, ThemeRadius, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Box
      p={ThemeSpace.Large}
      bg={ThemeColor.Accent}
      borderRadius={ThemeRadius.Small}
      color={ThemeColor.OnAccent}
    >
      Your box children goes here
    </Box>
  );
}

⛶

Using the as and asChild properties

By default, Box renders a div element. Using the as and asChild properties you can change what element to render the Box as.

• Do use as to provide meaningful semantics to your application. For example, use <Box as="nav"> if your element and its content fits the purpose of a nav-element.

• Don’t use as to render an element that already has it’s own Casper UI-library component that could be used instead. For example, using the Heading component is preferred over using <Box as="h1">.

• Do prefer to use asChild over as if you are wrapping a component from another library. This gives you better type safety than using as. For example, if you want to style a third party component, you can do it like this:

  <Box color={ThemeColor.Primary} asChild>
    <ThirdPartyComponent customProperty={42} />
  </Box>