Links

Prop aliases

What is a "prop alias"?

Prop alias is a prop name shorthand that compiles into a single or multiple CSS properties.
This feature is designed for convenience and development speed. These props can be assigned to any component exposed by the library, including the area components generated from your composition template strings.
Values of prop aliases can be applied conditionally. See Responsive props.
Each prop alias is associated with a single, or multiple corresponding CSS properties. See the list of all aliases and the corresponding CSS properties in the tables below.

Grid

Prop name
CSS property
areas
template
templateCols
templateRows
gap
grid-gap
gapCol
gapRow
col
colStart
colEnd
row
grid-row
rowStart
rowEnd
autoRows
autoCols
autoFlow

Alignment

Prop name
CSS property
order
order
flexDirection
flexShrink
flexGrow
flex-grow
flexWrap
flex-wrap
align
alignItems
alignContent
justify
justifyItems
justifyContent
place
place
placeItems
placeContent

Dimensions

Prop name
CSS property
minHeight
min-height
maxHeight
max-height
height
height
minWidth
min-width
maxWidth
max-width
width
width

Spacing

Prop name
CSS property
margin
margin
marginVertical
margin-top and margin-bottom
marginHorizontal
margin-right and margin-left
marginTop
margin-top
marginRight
margin-right
marginBottom
margin-bottom
marginLeft
margin-left
padding
padding
paddingVertical
padding-top and padding-bottom
paddingHorizontal
padding-right and padding-left
paddingTop
padding-top
paddingRight
padding-right
paddingBottom
padding-bottom
paddingLeft
padding-left