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.

The Box component is useful because it helps with 3 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.

Import#

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

Usage#

This is the Box
Editable Example

Usage#

Rear view of modern home with pool
New
3 beds • 2 baths

Modern home in city center in the heart of historic Los Angeles

$1,900.00/ wk
34 reviews
Editable Example

as prop#

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

Editable Example
Edit this page