WUI logo

Box

The Box component is the most basic component of Welcome UI — all other components make use of it for styling. By default, it’s a div element. It provides a flexible and consistent foundation for building and styling other UI elements, ensuring uniformity and ease of customization across the application.

Source@welcome-ui/box
OverviewProps
import * as React from 'react'
import { Box } from '@welcome-ui/box'


const Example = () => {
  return (
    <Box
      alignItems="center"
      backgroundColor="sub-3"
      color="light-900"
      display="flex"
      justifyContent="center"
      p="xxl"
    >
      This is a Box with style form theme
    </Box>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/box
2

Import component:

import { Box } from '@welcome-ui/box'

Examples

Customize

Aspect ratioFlex