Box

Box is a base component which includes all xstyled' system props. You could code your entire application using this component!

Box

Box is a div with superpowers.

import React from 'react'
import { Box } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Box
      backgroundColor="primary"
      width={{ sm: 1, md: 0.5 }}
      height={100}
      mx="auto"
      p={2}
    />
  )
}

render(<Example />)
import React from 'react'
import { Box } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Box
      backgroundColor="primary"
      width={{ sm: 1, md: 0.5 }}
      height={100}
      mx="auto"
      p={2}
    />
  )
}
render(<Example />)

The above example creates a red div with:

• A background with color "primary"
• A width of 100% on mobile, 50% on desktop
• A height of 100px
• A padding of 16px
• A marginLeft and a marginRight of 50%

Read more about system

Boxer

Boxer wraps all children in a Box with props applied to each Box.

The following example wraps the two div in a container with a vertical margin of 10px:

Hello
World
import React from 'react'
import { Boxer } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Boxer my={10}>
      <div>Hello</div>
      <div>World</div>
    </Boxer>
  )
}

render(<Example />)
import React from 'react'
import { Boxer } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Boxer my={10}>
      <div>Hello</div>
      <div>World</div>
    </Boxer>
  )
}
render(<Example />)

API

Box

Boxer