Box
The most abstract styling component in Chakra UI on top of which all other Chakra UI components are built.
Usage
The Box component provides an easy way to write styles with ease. It provides
access to design tokens and an unmatched DX when writing responsive styles.
import { Box } from "@chakra-ui/react"<Box />Examples
Shorthand
Use shorthand like bg instead of backgroundColor, m instead of margin,
etc.
Pseudo Props
Use pseudo props like _hover to apply styles on hover, _focus to apply
styles on focus, etc.
Border
Use the borderWidth and borderColor prop to apply border styles.
Good to know: Chakra applies borderStyle: solid globally so you don't
have to.
As Prop
Use the as prop to render a different component.
Inspect the DOM to see the rendered component.
Shadow
Use the boxShadow or shadow prop to apply shadow styles.
Composition
Here's an example of a property card built with layout primitives in Chakra.
4.5 (34)
Modern home in city center in the heart of historic Los Angeles
Props
The Box component supports all CSS properties as props, making it easy to
style elements.