Utility Props

List of style properties that can be used in CSS function or CSS props.

Background

Background Colors

Prop	CSS Property	Token Category
`bg`, `background`	`background`	`colors`
`bgColor`, `backgroundColor`	`background-color`	`colors`
`bgGradient`	`background-image`	`gradients`

Background Gradients

Prop	CSS Property	Token Category
`bgGradient`	`background-image`	`gradients`
`textGradient`	`background-image`	`gradients`
`gradientFrom`	`--gradient-from`	`colors`
`gradientTo`	`--gradient-to`	`colors`
`gradientVia`	`--gradient-via`	`colors`

Border

Border

Prop	CSS Property	Token Category
`border`	`border`	`borders`
`borderX` , `borderInline`	`borderInline`	`borders`
`borderY` , `borderBlock`	`borderBlock`	`borders`
`borderStart` , `borderInlineStart`	`borderInlineStart`	`borders`
`borderEnd` , `borderInlineEnd`	`borderInlineEnd`	`borders`

Border Radi

Prop	CSS Property	Token Category
`rounded`,`borderRadius`	`border-radius`	`radii`
`roundedTopLeft`,`borderTopLeftRadius`	`border-top-left-radius`	`radii`
`roundedTopRight`,`borderTopRight`	`border-top-right-radius`	`radii`
`roundedBottomRight`,`borderBottomRight`	`border-bottom-right-radius`	`radii`
`roundedBottomLeft`,`borderBottomLeft`	`border-bottom-left-radius`	`radii`
`roundedTop`,`borderTopRadius`	`border-top-{left+right}-radius`	`radii`
`roundedRight`,`borderRightRadius`	`border-{top+bottom}-right-radius`	`radii`
`roundedBottom`,`borderBottomRadius`	`border-bottom-{left+right}-radius`	`radii`
`roundedLeft`,`borderLeftRadius`	`border-{top+bottom}-left-radius`	`radii`

Border Width

Prop	CSS Property
`borderWidth`	`border-width`
`borderTopWidth`	`border-top-width`
`borderLeftWidth`	`border-left-width`
`borderRightWidth`	`border-right-width`
`borderBottomWidth`	`border-bottom-width`
`borderXWidth` , `borderInlineWidth`	`border-{left+right}-width`
`borderYWidth` , `borderBlockWidth`	`border-{top+bottom}-width`

Border Color

Prop	CSS Property	Token Category
`borderColor`	`border-color`	`colors`
`borderTopColor`	`border-top-color`	`colors`
`borderLeftColor`	`border-left-color`	`colors`
`borderRightColor`	`border-right-color`	`colors`
`borderBottomColor`	`border-bottom-color`	`colors`

Effects

Opacity

Prop	CSS Property	Token Category
`opacity`	`opacity`	`opacity`

Box Shadow

Prop	CSS Property	Token Category
`boxShadow`	`box-shadow`	`shadows`
`shadow`	`box-shadow`	`shadows`
`shadowColor`	`--shadow-color`	`colors`

Sizing

Width

Prop	CSS Property	Token Category
`w`, `width`	`width`	`sizing`
`maxW`, `maxWidth`	`max-width`	`sizing`
`minW`, `minWidth`	`min-width`	`sizing`

Height

Prop	CSS Property	Token Category
`h`, `height`	`height`	`sizing`
`maxH`, `maxHeight`	`max-height`	`sizing`
`minH`, `minHeight`	`min-height`	`sizing`

Spacing

Position

Prop	CSS Property	Token Category
`top`	`top`	`spacing`
`right`	`right`	`spacing`
`bottom`	`bottom`	`spacing`
`left`	`left`	`spacing`

Padding

Prop	CSS Property	Token Category
`p`,`padding`	`padding`	`spacing`
`pl`, `paddingLeft`	`padding-left`	`spacing`
`pr`, `paddingRight`	`padding-right`	`spacing`
`pt`, `paddingTop`	`padding-top`	`spacing`
`pb`, `paddingBottom`	`padding-bottom`	`spacing`
`px`, `paddingX`	`padding-left`	`spacing`
`py`, `paddingY`	`padding-top`	`spacing`

Margin

Prop	CSS Property	Token Category
`m`,`margin`	`margin`	`spacing`
`ml`, `marginLeft`	`margin-left`	`spacing`
`mr`, `marginRight`	`margin-right`	`spacing`
`mt`, `marginTop`	`margin-top`	`spacing`
`mb`, `marginBottom`	`margin-bottom`	`spacing`
`mx`, `marginX`	`margin-left`	`spacing`
`my`, `marginY`	`margin-top`	`spacing`

Typography

Font Properties

Prop	CSS Property	Token Category
`fontFamily`	`font-family`	`fonts`
`fontSize`	`font-size`	`fontSizes`
`fontWeight`	`font-weight`	`fontWeights`
`letterSpacing`	`letter-spacing`	`letterSpacings`
`lineHeight`	`line-height`	`lineHeights`
`textDecorationColor`	`text-decoration-color`	`colors`
`textEmphasisColor`	`text-emphasis-color`	`colors`
`textIndent`	`text-indent`	`spacing`
`textShadow`	`text-shadow`	`shadows`

Truncate

Prop	CSS Property	Token Category
`lineClamp`	`webkit-line-clamp`	none
`truncate`	`text-overflow`	none

Text Styles

Prop	Config
`textStyle`	`textStyles`