Skip to main content

Box

Box is the most abstract component on top of which all other Chakra UI components are built. By default, it renders a div element

Import

import { Box } from "@chakra-ui/react";

Usage

The Box component is useful because it helps with three common use cases:

  • Create responsive layouts with ease.
  • Provide a shorthand way to pass styles via props (bg instead of backgroundColor).
  • Compose new component and allow for override using the as prop.

Airbnb example

as prop

You can use the as prop to change the element render, just like styled-components.