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-solid";

<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: Panda’s preflight sets border-style: 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.

Props

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