Box

Leverage the Box component from Shadow UI—a versatile and powerful layout building block. Effortlessly customize its styles, props, and structure to create responsive designs.

Usage

import React from 'react';
import { Box } from './components';

const Main = () => {
  return (
     <Box flex={1} bg="primary"  />
  );
};

export default Main;

The Box component comes with the following restyle functions:

⚠️ Note: Remember, props must match their corresponding theme keys

Restyle Function	Props	Theme Key
backgroundColor	backgroundColor [bg]	colors
opacity	opacity	none
visible	display (maps `true` / `false` to `flex` / `none`)	none
spacing	margin [m], marginTop [mt], marginRight [mr], marginBottom [mb], marginLeft [ml], marginStart [ms], marginEnd[me], marginHorizontal [mx], marginVertical [my], padding [p], paddingTop [pt], paddingRight [pr], paddingBottom [pb], paddingLeft [pl], paddingStart [ps], paddingEnd [pe], paddingHorizontal [px], paddingVertical [py], gap [g], rowGap [rG], columnGap [cG]	spacing
layout	width, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap	none
position	position, top, right, bottom, left, start, end	none
position	zIndex	zIndices
border	borderBottomWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderEndWidth, borderStyle, borderTopWidth, borderWidth	none
border	borderColor, borderTopColor, borderRightColor, borderLeftColor, borderStartColor, borderEndColor, borderBottomColor	colors
border	borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStartRadius, borderBottomEndRadius, borderTopLeftRadius, borderTopRightRadius, borderTopStartRadius, borderTopEndRadius	borderRadii
shadow	shadowOpacity, shadowOffset, shadowRadius, elevation	none
shadow	shadowColor	colors

Usage​

Usage