Prop aliases

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. Read about Responsive props.

Each prop alias is associated with a single, or multiple corresponding CSS properties. See the list of all aliases and their CSS properties in the tables below.

Grid

Prop name

CSS property

areas

grid-template-areas

template

grid-template-areas

templateCols

grid-template-columns

templateRows

grid-template-rows

gap

grid-gap

gapCol

grid-column-gap

gapRow

grid-row-gap

col

grid-column

colStart

grid-column-start

colEnd

grid-column-end

row

grid-row

rowStart

grid-row-start

rowEnd

grid-row-end

autoRows

grid-auto-rows

autoCols

grid-auto-columns

autoFlow

grid-auto-flow

Alignment

Prop name

CSS property

flexDirection

flex-direction

flexShrink

flex-shrink

flexGrow

flex-grow

flexWrap

flex-wrap

align

align-self

alignItems

align-items

alignContent

align-content

justify

justify-self

justifyItems

justify-items

justifyContent

justify-content

place

place

placeItems

place-items

placeContent

place-content

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