Box

The most abstract styling component, on top of which all other components here are built.

Source: packages/components/src/boxChakra UI ↗

This is the Box

import { Box } from "@chakra-ui-solid/components";

export default function BoxBasic() {
  return (
    <Box background="red.solid" width="100%" padding="4" color="red.contrast">
      This is the Box
    </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/components";

<Box />

Examples

Shorthand

Use shorthand like bg instead of backgroundColor, m instead of margin, etc.

This is the Box

import { Box } from "@chakra-ui-solid/components";

export default function BoxWithShorthand() {
  return (
    <Box bg="red.solid" w="100%" p="4" color="red.contrast">
      This is the Box
    </Box>
  );
}

Pseudo Props

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

This is the Box

import { Box } from "@chakra-ui-solid/components";

export default function BoxWithPseudoProps() {
  return (
    <Box
      bg="red.solid"
      w="100%"
      p="4"
      color="red.contrast"
      _hover={{ bg: "green.solid", color: "green.contrast" }}
    >
      This is the Box
    </Box>
  );
}

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.

Box with a border

import { Box } from "@chakra-ui-solid/components";

export default function BoxWithBorder() {
  return (
    <Box p="4" borderWidth="1px" borderColor="border.emphasized" color="fg.muted">
      Box with a border
    </Box>
  );
}

As Prop

Use the as prop to render a different element.

Inspect the DOM to see the rendered element.

This is a Box rendered as a section

import { Box } from "@chakra-ui-solid/components";

export default function BoxWithAsProp() {
  return (
    <Box as="section" color="fg.muted">
      This is a Box rendered as a section
    </Box>
  );
}

as stays a loose ValidComponent rather than a generic that re-types props from the element. That is deliberate: the deep conditional types that would buy you href on as="a" also wreck editor completions across every component in the library.

Shadow

Use the boxShadow or shadow prop to apply shadow styles.

Box with shadow

import { Box } from "@chakra-ui-solid/components";

export default function BoxWithShadow() {
  return (
    <Box bg="bg" p="4" shadow="md" borderRadius="md">
      Box with shadow
    </Box>
  );
}

Composition

Here’s an example of a property card built with Box alone. Chakra’s version of it composes Badge, HStack, Icon, Image and Text; none of those has shipped here yet, so this is the primitive doing the whole job.

Superhost4.5 (34)

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

$435 · 3 beds

import { Box } from "@chakra-ui-solid/components";

export default function BoxPropertyCard() {
  return (
    <Box maxW="sm" borderWidth="1px" borderColor="border" borderRadius="l2" overflow="hidden">
      <Box height="40" bg="bg.emphasized" aria-hidden="true" />

      <Box p="4" display="flex" flexDirection="column" gap="2">
        <Box display="flex" alignItems="center" gap="2">
          <Box
            as="span"
            bg="teal.subtle"
            color="teal.fg"
            px="2"
            py="0.5"
            borderRadius="l1"
            fontSize="xs"
            fontWeight="medium"
          >
            Superhost
          </Box>
          <Box as="span" fontSize="sm" fontWeight="medium" color="fg">
            {data.rating} ({data.reviewCount})
          </Box>
        </Box>

        <Box fontWeight="medium" color="fg">
          {data.title}
        </Box>

        <Box color="fg.muted" fontSize="sm">
          {data.formattedPrice} · {data.beds} beds
        </Box>
      </Box>
    </Box>
  );
}

const data = {
  beds: 3,
  title: "Modern home in city center in the heart of historic Los Angeles",
  formattedPrice: "$435",
  reviewCount: 34,
  rating: 4.5,
};

Props

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

Prop	Type	Description
`as`	`ValidComponent`	Render as a different element/component. Defaults to `div`.
`render`	`RenderProp<BoxElementProps>`	Render-prop override that receives Box's computed DOM props.

Plus everything it inherits: Omit<PatchHtmlProps<BoxElementProps>, keyof JsxStyleProps>, JsxStyleProps. Those are the whole style-prop surface and the DOM attributes of the element it renders — several hundred names, listed here as their sources rather than expanded.

Both rows are read from the interface in packages/components/src/box/box.tsx by the generator, not transcribed. The inherited half is named rather than expanded: JsxStyleProps is the entire style-prop vocabulary, and PatchHtmlProps<JSX.HTMLAttributes<HTMLElement>> is the DOM attribute surface with the five html* renames applied.

render

Polymorphism beyond as is the render prop, on Box and on every part of every component. It is a function that receives the computed props and returns the element — never a JSX element, and never asChild. A Solid JSX element is an already-constructed node by the time it reaches us and there is no cloneElement, so accepting one could only mean dropping every prop that was computed for it.

A styled anchor

import { Box } from "@chakra-ui-solid/components";
import type { JSX } from "@solidjs/web";

export default function BoxWithRenderProp() {
  return (
    <Box
      px="4"
      py="2"
      borderRadius="l2"
      bg="colorPalette.solid"
      color="colorPalette.contrast"
      textDecoration="none"
      render={(props) => (
        <a {...(props as JSX.AnchorHTMLAttributes<HTMLAnchorElement>)} href="https://panda-css.com">
          {props.children}
        </a>
      )}
    >
      A styled anchor
    </Box>
  );
}

That cast is real, and it is narrow. Box types its element props against HTMLElement, and Solid’s Ref<HTMLElement> is not assignable to Ref<HTMLAnchorElement> — so a render target that is a host element narrower than HTMLElement needs a cast. Elements whose interface is HTMLElement — section, article, span, mark and their neighbours — need none, and neither does a component that accepts JSX.HTMLAttributes<HTMLElement>. A part typed against its own element, like Dialog.Trigger against HTMLButtonElement, needs none either.