Box

The fundamental primitive component that includes styling utility properties, and corresponding design variables as values.

By default, it renders a div element.

Usage

Code

import { createSystem } from 'frog/ui'
 
const { Box } = createSystem()
 
function Example() {
  return (
    <Box
      backgroundColor="rred100
red200
red300
red400
red500
red600
red
red700
red800
red900
red1000ed"
      borderRadius="8"
      height="48"
      width="48"
    />
  )
}

Style Properties

The Box component accepts Style Properties (ie. properties of a div style).

Below are some examples of the most common style properties that can be used with the Box component.

Layout

Box accepts the following layout style properties:

alignContent
alignItems
alignSelf
display
flex
flexBasis
flexDirection
flexShrink
flexWrap
gap
grow
justifyContent
overflow

Code

import { createSystem } from 'frog/ui'
 
const { Box } = createSystem()
 
function Example() {
  return (
    <Box grow flexDirection="row" gap="8">
      <Box backgroundColor="red" flex="1" />
      <Box backgroundColor="red" flex="1" />
    </Box>
  )
}

Alignment

Box accepts the following alignment style properties:

alignHorizontal
alignVertical

Code

import { createSystem } from 'frog/ui'
 
const { Box } = createSystem()
 
function Example() {
  return (
    <Box 
      grow 
      alignHorizontal="center"
      alignVertical="bottom
top
center
space-betweencenter"
    >
      <Box backgroundColor="red" height="20" width="20" />
    </Box>
  )
}

Borders

Box accepts the following border style properties:

borderBottom
borderBottom{Color|LeftRadius|RightRadius|Style|Width}
borderColor
borderLeft
borderLeft{Color|Style|Width}
borderStyle
borderRadius
borderRight
borderRight{Color|Style|Width}
borderTop
borderTop{Color|LeftRadius|RightRadius|Style|Width}

Code

import { createSystem } from 'frog/ui'
 
const { Box } = createSystem()
 
function Example() {
  return (
    <Box 
      borderStyle="solid" 
      borderRadius="8"
      borderWidth="2" 
      borderColor="rred100
red200
red300
red400
red500
red600
red
red700
red800
red900
red1000ed" 
      height="48" 
      width="48" 
    />
  )
}

Colors

Box accepts the following color style properties:

backgroundColor
borderColor
color

Code

import { createSystem } from 'frog/ui'
 
const { Box } = createSystem()
 
function Example() {
  return (
    <Box 
      backgroundColor="bbackground
background100
background200
blue100
blue200
blue300
blue400
blue500
blue600
blue
blue700
blue800
blue900
blue1000lue" 
      height="48" 
      width="48" 
    />
  )
}

Font & Text

Box accepts the following font & text style properties:

fontFamily
fontSize
fontStyle
fontWeight
textAlign
textDecoration
textOverflow
textTransform
textShadow
textWrap

Code

import { createSystem } from 'frog/ui'
 
const { Box } = createSystem()
 
function Example() {
  return (
    <Box fontSize="48" textAlign="left
right
center
end
start
justifycenter">
      Hello world
    </Box>
  )
}

Height & Width

Box accepts the following font & text style properties:

height
maxHeight
maxWidth
minHeight
minWidth
width

Code

import { createSystem } from 'frog/ui'
 
const { Box } = createSystem()
 
function Example() {
  return (
    <Box backgroundColor="red" height="48" width="48" />
  )
}

Paddings

Box accepts the following font & text style properties:

padding
paddingBottom
paddingLeft
paddingRight
paddingTop

Code

import { createSystem } from 'frog/ui'
 
const { Box } = createSystem()
 
function Example() {
  return (
    <Box padding="48">
      <Box backgroundColor="red" height="48" width="48" />
    </Box>
  )
}