Get Started
Components
Styling
Theming

Box

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

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