Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Box

The most abstract styling component in Chakra UI on top of which all other Chakra UI components are built.

This is the 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.

This is the Box

Pseudo Props

Use pseudo props like _hover to apply styles on hover, _focus to apply styles on focus, etc.

This is the Box

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.

Somewhat disabled box

As Prop

Use the as prop to render a different component.

Inspect the DOM to see the rendered component.

This is a Box rendered as a section

Shadow

Use the boxShadow or shadow prop to apply shadow styles.

Box with shadow

Composition

Here's an example of a property card built with layout primitives in Chakra.

Rear view of modern home with pool
Superhost

4.5 (34)

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

$4353 beds

Props

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

Previous

Bleed

Next

Center