Style Properties

Style properties in Pearl UI offer a convenient method to apply styling to components by passing properties directly to them. This feature enhances developer productivity and ensures the readability of complex components remains intact.

Reference

The following sections provide a comprehensive list of supported style properties and the values they accept.

Margin and padding

// m="1" refers to the value of `theme.spacing["1"]`<Box m="1">Tomato</Box>
// pt="3" refers to the value of `theme.spacing["3"]`<Box pt="3">Red</Box>

Prop	Stylesheet property	Type
m, margin	margin	PearlTheme['spacing']
mt, marginTop	marginTop	PearlTheme['spacing']
mr, marginRight	marginRight	PearlTheme['spacing']
mb, marginBottom	marginBottom	PearlTheme['spacing']
ml, marginLeft	marginLeft	PearlTheme['spacing']
mx, marginHorizontal	marginHorizontal	PearlTheme['spacing']
my, marginVertical	marginVertical	PearlTheme['spacing']
ms, marginStart	marginStart	PearlTheme['spacing']
me, marginEnd	marginEnd	PearlTheme['spacing']
p, padding	padding	PearlTheme['spacing']
pt, paddingTop	paddingTop	PearlTheme['spacing']
pr, paddingRight	paddingRight	PearlTheme['spacing']
pb, paddingBottom	paddingBottom	PearlTheme['spacing']
pl, paddingLeft	paddingLeft	PearlTheme['spacing']
px, paddingHorizontal	paddingHorizontal	PearlTheme['spacing']
py, paddingVertical	paddingVertical	PearlTheme['spacing']
ps, paddingStart	paddingStart	PearlTheme['spacing']
pe, paddingEnd	paddingEnd	PearlTheme['spacing']

Color and Background Color

// bgColor="primary.500" refers to the value of `theme.palette["primary"]["500"]`<Box bgColor="primary.500">Primary Box</Box>
// The specified 'light' and 'dark' values get activated based on the current color mode of the theme<Box color={{ light: "neutral.200", dark: "primary.100" }}>Red</Box>

Prop	Stylesheet property	Type
bgColor, backgroundColor	backgroundColor	PearlTheme['palette']
color	color	PearlTheme['palette']

Opacity and Visibility

<Box opacity={0.3}>Translucent Box</Box>
<Box visible={false}>Hidden Box</Box>

Prop	Stylesheet property	Type
opacity	opacity	number
visible	visible	boolean

Layout

<Box width="100%" height={200}>  Translucent Box</Box>
<Box width="100%" height={50} flex={1} flexDirection="row" justifyContent="space-between">  <Box width={20} height={50}>    1  </Box>  <Box w={50} h={30} maxHeight={50}>    2  </Box>  <Box w={30} maxW={40} height={50}>    3  </Box></Box>

Prop	Stylesheet property	Type
w, width	width	number | string
h, height	height	number | string
minW, minWidth	minWidth	number | string
maxW, maxWidth	maxWidth	number | string
minH, minHeight	minHeight	number | string
maxH, maxHeight	maxHeight	number | string
overflow	overflow	'visible' | 'hidden' | 'scroll'
aspectRatio	aspectRatio	number
alignContent	alignContent	'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around'
alignItems	alignItems	'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
alignSelf	alignSelf	'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
justifyContent	justifyContent	'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
flex	flex	number
flexBasis	flexBasis	number | string
flexDirection	flexDirection	'row' | 'column' | 'row-reverse' | 'column-reverse'
flexGrow	flexGrow	number
flexShrink	flexShrink	number
flexWrap	flexWrap	'wrap' | 'nowrap' | 'wrap-reverse'

Transform

<Box  transform={[    { rotate: "45deg" },    { scale: 2 },    { translateX: -50 },    { translateY: -50 },  ]}>  <Text>Transformed Box</Text></Box>

Prop	Stylesheet property	Type
transform	transform	array
transformMatrix	transformMatrix	array
rotation	rotation	number
scaleX	scaleX	number
scaleY	scaleY	number
translateX	translateX	number
translateY	translateY	number

Position

<Box  top={20}  alignItems="center"  justifyContent="center"  width="100%"  position="absolute">  Absolute box</Box>

Prop	Stylesheet property	Type
position	position	'absolute' | 'relative'
top	top	number | string
right	right	number | string
bottom	bottom	number | string
left	left	number | string
start	start	number | string
end	end	number | string
zIndex	zIndex	PearlTheme['zIndices']

Border

// borderColor="tomato" refers to the value of `theme.palette["tomato"]`// borderRadius="l" refers to the value of `theme.borderRadii["l"]`<Box  backgroundColor="neutral.100"  width="40%"  height={200}  borderStyle="solid"  borderWidth={2}  borderColor="tomato"  borderRadius="l">  Absolute box</Box>

Prop	Stylesheet property	Type
borderBottomWidth	borderBottomWidth	number
borderLeftWidth	borderLeftWidth	number
borderRightWidth	borderRightWidth	number
borderStyle	borderStyle	'solid' | 'dotted' | 'dashed'
borderTopWidth	borderTopWidth	number
borderStartWidth	borderStartWidth	number
borderEndWidth	borderEndWidth	number
borderWidth	borderWidth	number
borderColor	borderColor	PearlTheme['palette']
borderTopColor	borderTopColor	PearlTheme['palette']
borderRightColor	borderRightColor	PearlTheme['palette']
borderLeftColor	borderLeftColor	PearlTheme['palette']
borderBottomColor	borderBottomColor	PearlTheme['palette']
borderStartColor	borderStartColor	PearlTheme['palette']
borderEndColor	borderEndColor	PearlTheme['palette']
borderRadius	borderRadius	PearlTheme['borderRadii'] | number
borderBottomLeftRadius	borderBottomLeftRadius	PearlTheme['borderRadii'] | number
borderBottomRightRadius	borderBottomRightRadius	PearlTheme['borderRadii'] | number
borderTopLeftRadius	borderTopLeftRadius	PearlTheme['borderRadii'] | number
borderTopRightRadius	borderTopRightRadius	PearlTheme['borderRadii'] | number
borderBottomStartRadius	borderBottomStartRadius	PearlTheme['borderRadii'] | number
borderBottomEndRadius	borderBottomEndRadius	PearlTheme['borderRadii'] | number
borderTopStartRadius	borderTopStartRadius	PearlTheme['borderRadii'] | number
borderTopEndRadius	borderTopEndRadius	PearlTheme['borderRadii'] | number

Typography

// textShadowColor="blue" refers to the value of `theme.palette["blue"]`<Text  lineHeight={12}  textAlign="center"  textDecorationLine="underline"  textShadowColor="blue">  This is a demo text</Text>

Prop	Stylesheet property	Type
fontFamily	fontFamily	PearlTheme['fonts']
fontSize	fontSize	PearlTheme['fontSizes']
fontWeight	fontWeight	PearlTheme['fontWeights']
letterSpacing	letterSpacing	PearlTheme['letterSpacings']
lineHeight	lineHeight	PearlTheme['lineHeights']
fontStyle	fontStyle	'normal' | 'italic'
textAlign	textAlign	'auto' | 'left' | 'right' | 'center' | 'justify'
textDecorationLine	textDecorationLine	'none' | 'underline' | 'line-through' | 'underline line-through'
textDecorationStyle	textDecorationStyle	'solid' | 'double' | 'dotted' | 'dashed'
textTransform	textTransform	'none' | 'capitalize' | 'uppercase' | 'lowercase'
textShadowOffset	textShadowOffset	{ width: number; height: number }
textShadowRadius	textShadowRadius	number
textShadowColor	textShadowColor	PearlTheme['palette']

Shadow

// boxShadow="l" refers to the value of `theme.elevation["l"]`<Box boxShadow="l">Theme Shadow box</Box>
// shadowColor="neutral.800" refers to the value of `theme.palette["neutral"]["800"]`<Box  shadowOffset={{width: 20, height: 10}}  shadowColor="neutral.800"  shadowRadius={13}  shadowOpacity={0.7}>  Custom Shadow box</Box>

Prop	Stylesheet property	Type
boxShadow	shadowOffset + shadowOpacity + shadowRadius + elevation + shadowColor	PearlTheme['elevation']
shadowColor	shadowColor	PearlTheme['palette']
shadowOffset	shadowOffset	{ width: number; height: number }
shadowOpacity	shadowOpacity	number
shadowRadius	shadowRadius	number

Text Shadow

// textShadowColor="primary.300" refers to the value of `theme.palette["primary"]["300"]`<Text  textShadowColor="primary.300"  textShadowOffset={{ width: 2, height: 5 }}  textShadowRadius={2}>  Text with some sweet shadow</Text>

Prop	Stylesheet property	Type
shadowColor	shadowColor	PearlTheme['palette']
textShadowOffset	textShadowOffset	{ width: number; height: number }
textShadowRadius	textShadowRadius	number