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'

Usage

The Box pattern does not contain any additional styles. With its function form it's the equivalent of the css function. It can be useful with its JSX form and is the equivalent of a styled.div component, serving mostly to get style props available in JSX.

This is the Box

import { Box } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <Box bgColor="page.bg.100" color="white" padding="4" width="3/4">
      This is the Box
    </Box>
  )
}

Shorthand

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

This is the Box

import { Box } from 'styled-system/jsx'

export function ShorthandDemo() {
  return (
    <Box bgColor="page.bg.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.

A Box is not a Button

import { Box } from 'styled-system/jsx'

export function PsuedoDemo() {
  return (
    <Box bg="tomato" w="100%" p="4" color="white" _hover={{ bg: 'green' }}>
      A Box is not a Button
    </Box>
  )
}

Border

Use the border and borderColor prop to apply border styles.

Box with a border

import { Box } from 'styled-system/jsx'

export function BorderDemo() {
  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.

This is the Box with shadow

import { Box } from 'styled-system/jsx'

export function ShadowDemo() {
  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