Box

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

Panda

import { Box } from "styled-system/jsx";

const Demo = () => {
  return (
    <Box bgColor="page.surface.100" color="white" padding="4"  width="full" >
      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 "styled-system/jsx";

<Box />

Examples

Shorthand

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

import { Box } from "styled-system/jsx";

const Demo = () => {
  return (
    <Box
      bgColor="page.surface.100"
      color="page.text.100"
      m="md"
      p="md"
      w="full"
    >
      This is the Box
    </Box>
  )
}

Pseudo Props

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

import { Box } from "styled-system/jsx";

const Demo = () => {
  return (
    <Box bg="tomato" w="100%" p="4" color="white" _hover={{ bg: "green" }}>
      This is the Box
    </Box>
  )
}

Border

Use the border and borderColor prop to apply border styles.

import { Box } from "styled-system/jsx";

const Demo = () => {
  return (
    <Box
      border="1px solid"
      borderColor="page.border.initial"
      color="page.text.100"
      p="4"
    >
      Box with a border
    </Box>
  )
}

Shadow

Use the boxShadow or shadow prop to apply shadow styles.

import { Box } from "styled-system/jsx";

const Demo = () => {
  return (
    <Box
      bgColor="page.surface.100"
      color="page.text.100"
      p="4"
      rounded="md"
      shadow="md"
    >
      This is the Box with shadow
    </Box>
  )
}

Props

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

On this page

Edit this page on Github

Examples

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

import { Box } from "styled-system/jsx";

const Demo = () => {
  return (
    <Box
      bgColor="page.surface.100"
      color="page.text.100"
      m="md"
      p="md"
      w="full"
    >
      This is the Box
    </Box>
  )
}

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

import { Box } from "styled-system/jsx";

const Demo = () => {
  return (
    <Box bg="tomato" w="100%" p="4" color="white" _hover={{ bg: "green" }}>
      This is the Box
    </Box>
  )
}

Use the border and borderColor prop to apply border styles.

import { Box } from "styled-system/jsx";

const Demo = () => {
  return (
    <Box
      border="1px solid"
      borderColor="page.border.initial"
      color="page.text.100"
      p="4"
    >
      Box with a border
    </Box>
  )
}

Use the boxShadow or shadow prop to apply shadow styles.

import { Box } from "styled-system/jsx";

const Demo = () => {
  return (
    <Box
      bgColor="page.surface.100"
      color="page.text.100"
      p="4"
      rounded="md"
      shadow="md"
    >
      This is the Box with shadow
    </Box>
  )
}