Box

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.

Props

The Box component supports all CSS properties as props, making it easy to style elements.