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.



This is the Box
Editable Example


Rear view of modern home with pool
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

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo