Skip to main content

packages.styleProps.title

packages.styleProps.description

packages.styleProps.scalesAndTypes.title

packages.styleProps.scalesAndTypes.description

SpaceScale

packages.styleProps.scalesAndTypes.scales.spaceScale.description

0|1|2|3|4|5|6|7|8|9|10|11|12|14|16|20|24
MarginScale

packages.styleProps.scalesAndTypes.scales.marginScale.description

0|1|2|3|4|5|6|7|8|9|10|11|12|14|16|20|24|"auto"
WidthScale

packages.styleProps.scalesAndTypes.scales.widthScale.description

0|1|2|3|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|"full"|"auto"|"fit"|"min"|"max"|"dvh"|"dvw"|"lvw"|"lvh"|"svh"|"svw"|"screen"|"3xs"|"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"|"4xl"|"5xl"|"6xl"|"7xl"
HeightScale

packages.styleProps.scalesAndTypes.scales.heightScale.description

0|1|2|3|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|"full"|"auto"|"fit"|"min"|"max"|"dvh"|"dvw"|"lvw"|"lvh"|"svh"|"svw"|"screen"
MaxWidthScale

packages.styleProps.scalesAndTypes.scales.maxWidthScale.description

0|1|2|3|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|"full"|"auto"|"fit"|"min"|"max"|"dvh"|"dvw"|"lvw"|"lvh"|"svh"|"svw"|"screen"|"3xs"|"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"|"4xl"|"5xl"|"6xl"|"7xl"|"none"
MaxHeightScale

packages.styleProps.scalesAndTypes.scales.maxHeightScale.description

0|1|2|3|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|"full"|"auto"|"fit"|"min"|"max"|"dvh"|"dvw"|"lvw"|"lvh"|"svh"|"svw"|"screen"|"none"
ExtendedSizeScale

packages.styleProps.scalesAndTypes.scales.extendedSizeScale.description

0|1|2|3|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|"full"|"auto"|"fit"|"min"|"max"|"dvh"|"dvw"|"lvw"|"lvh"|"svh"|"svw"

packages.styleProps.categories.spacing.title

packages.styleProps.categories.spacing.description

Loading interactive example...

packages.styleProps.availableProps
packages.styleProps.tableHeaders.proppackages.styleProps.tableHeaders.typepackages.styleProps.tableHeaders.descriptionpackages.styleProps.tableHeaders.example
gapSpaceScale

Gap between flex/grid children

gap={0}
gapXSpaceScale

Horizontal gap between flex/grid children

gapX={0}
gapYSpaceScale

Vertical gap between flex/grid children

gapY={0}
margin, mMarginScale

Margin on all sides. Supports negative values via marginNeg, mNeg.

margin={0} or m={0}
marginBottom, mbMarginScale

Bottom margin. Negative: marginBottomNeg, mbNeg.

marginBottom={0} or mb={0}
marginEnd, meMarginScale

End margin (LTR: right, RTL: left). Negative: marginEndNeg, meNeg.

marginEnd={0} or me={0}
marginLeft, mlMarginScale

Left margin. Negative: marginLeftNeg, mlNeg.

marginLeft={0} or ml={0}
marginRight, mrMarginScale

Right margin. Negative: marginRightNeg, mrNeg.

marginRight={0} or mr={0}
marginStart, msMarginScale

Start margin (LTR: left, RTL: right). Negative: marginStartNeg, msNeg.

marginStart={0} or ms={0}
marginTop, mtMarginScale

Top margin. Negative: marginTopNeg, mtNeg.

marginTop={0} or mt={0}
marginX, mxMarginScale

Horizontal margin (left and right). Negative: marginXNeg, mxNeg.

marginX={0} or mx={0}
marginY, myMarginScale

Vertical margin (top and bottom). Negative: marginYNeg, myNeg.

marginY={0} or my={0}
padding, pSpaceScale

Padding on all sides

padding={0} or p={0}
paddingBottom, pbSpaceScale

Bottom padding

paddingBottom={0} or pb={0}
paddingEnd, peSpaceScale

End padding (LTR: right, RTL: left)

paddingEnd={0} or pe={0}
paddingLeft, plSpaceScale

Left padding

paddingLeft={0} or pl={0}
paddingRight, prSpaceScale

Right padding

paddingRight={0} or pr={0}
paddingStart, psSpaceScale

Start padding (LTR: left, RTL: right)

paddingStart={0} or ps={0}
paddingTop, ptSpaceScale

Top padding

paddingTop={0} or pt={0}
paddingX, pxSpaceScale

Horizontal padding (left and right)

paddingX={0} or px={0}
paddingY, pySpaceScale

Vertical padding (top and bottom)

paddingY={0} or py={0}

packages.styleProps.categories.layout.title

packages.styleProps.categories.layout.description

Loading interactive example...

packages.styleProps.availableProps
packages.styleProps.tableHeaders.proppackages.styleProps.tableHeaders.typepackages.styleProps.tableHeaders.descriptionpackages.styleProps.tableHeaders.example
display"inline" | "block" | "inline-block" | ... | "sr-only" | "not-sr-only"

CSS display type

display="inline"
overflow"auto" | "hidden" | "clip" | "visible"

Overflow behavior on all sides

overflow="auto"
overflowX"auto" | "hidden" | "clip" | "visible"

Horizontal overflow behavior

overflowX="auto"
overflowY"auto" | "hidden" | "clip" | "visible"

Vertical overflow behavior

overflowY="auto"
overscroll"auto" | "contain" | "none"

Overscroll behavior on all sides

overscroll="auto"
overscrollX"auto" | "contain" | "none"

Horizontal overscroll behavior

overscrollX="auto"
overscrollY"auto" | "contain" | "none"

Vertical overscroll behavior

overscrollY="auto"
position"static" | "relative" | "absolute" | "fixed" | "sticky"

CSS position type

position="static"
visibility"visible" | "hidden" | "collapse"

Visibility state

visibility="visible"

packages.styleProps.categories.size.title

packages.styleProps.categories.size.description

Loading interactive example...

packages.styleProps.availableProps
packages.styleProps.tableHeaders.proppackages.styleProps.tableHeaders.typepackages.styleProps.tableHeaders.descriptionpackages.styleProps.tableHeaders.example
height, hHeightScale

Height of the element

height={0} or h={0}
maxHeight, maxHMaxHeightScale

Maximum height constraint

maxHeight={0} or maxH={0}
maxWidth, maxWMaxWidthScale

Maximum width constraint

maxWidth={0} or maxW={0}
minHeight, minHHeightScale

Minimum height constraint

minHeight={0} or minH={0}
minWidth, minWWidthScale

Minimum width constraint

minWidth={0} or minW={0}
sizeExtendedSizeScale

Width and height (creates square element)

size={0}
width, wWidthScale

Width of the element

width={0} or w={0}

packages.styleProps.categories.flexbox.title

packages.styleProps.categories.flexbox.description

Loading interactive example...

packages.styleProps.availableProps
packages.styleProps.tableHeaders.proppackages.styleProps.tableHeaders.typepackages.styleProps.tableHeaders.descriptionpackages.styleProps.tableHeaders.example
flex1 | "auto" | "initial" | "none"

Flex grow/shrink behavior

flex={1}
flexDirection"row" | "column" | "row-reverse" | "column-reverse"

Flex direction (main axis)

flexDirection="row"
flexWrap"nowrap" | "wrap" | "wrap-reverse"

Flex wrap behavior

flexWrap="nowrap"
grow0 | 1

Flex grow (0 = no grow, 1 = grow)

grow={0}
items"start" | "end" | "center" | "baseline" | "stretch"

Align items (cross-axis alignment)

items="start"
justify"start" | "end" | "center" | "between" | "around" | "evenly"

Justify content (main-axis alignment)

justify="start"
order1 | 2 | 3 | ... | "last" | "none"

Flex order (visual order of items)

order={1}
self"auto" | "start" | "end" | "center" | "stretch" | "baseline"

Align self (individual item alignment)

self="auto"
shrink0 | 1

Flex shrink (0 = no shrink, 1 = shrink)

shrink={0}

packages.styleProps.categories.grid.title

packages.styleProps.categories.grid.description

Loading interactive example...

packages.styleProps.availableProps
packages.styleProps.tableHeaders.proppackages.styleProps.tableHeaders.typepackages.styleProps.tableHeaders.descriptionpackages.styleProps.tableHeaders.example
colSpan1 | 2 | 3 | ... | "full" | "auto"

Column span (how many columns an item spans)

colSpan={1}
gridCols1 | 2 | 3 | ... | "none" | "subgrid"

Number of grid columns

gridCols={1}
gridRows1 | 2 | 3 | ... | "none" | "subgrid"

Number of grid rows

gridRows={1}
placeContent"start" | "end" | "center" | "stretch" | "between" | "around" | "evenly" | "baseline"

Place content alignment (aligns grid content)

placeContent="start"
placeItems"start" | "end" | "center" | "stretch" | "baseline"

Place items alignment (aligns all grid items)

placeItems="start"
placeSelf"auto" | "start" | "end" | "center" | "stretch" | "baseline"

Place self alignment (aligns individual grid item)

placeSelf="auto"
rowSpan1 | 2 | 3 | ... | "full" | "auto"

Row span (how many rows an item spans)

rowSpan={1}

packages.styleProps.categories.border.title

packages.styleProps.categories.border.description

Loading interactive example...

packages.styleProps.availableProps
packages.styleProps.tableHeaders.proppackages.styleProps.tableHeaders.typepackages.styleProps.tableHeaders.descriptionpackages.styleProps.tableHeaders.example
border0 | 1 | 2 | 3 | 4 | 5 | 6

Border width on all sides

border={0}
borderBottom0 | 1 | 2 | 3 | 4 | 5 | 6

Bottom border width

borderBottom={0}
borderLeft0 | 1 | 2 | 3 | 4 | 5 | 6

Left border width

borderLeft={0}
borderRight0 | 1 | 2 | 3 | 4 | 5 | 6

Right border width

borderRight={0}
borderTop0 | 1 | 2 | 3 | 4 | 5 | 6

Top border width

borderTop={0}
borderX0 | 1 | 2 | 3 | 4 | 5 | 6

Horizontal border (left and right)

borderX={0}
borderY0 | 1 | 2 | 3 | 4 | 5 | 6

Vertical border (top and bottom)

borderY={0}
rounded"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

Border radius on all corners

rounded="none"
roundedBottom"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

Bottom border radius

roundedBottom="none"
roundedBottomLeft"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

Bottom-left border radius

roundedBottomLeft="none"
roundedBottomRight"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

Bottom-right border radius

roundedBottomRight="none"
roundedLeft"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

Left border radius

roundedLeft="none"
roundedRight"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

Right border radius

roundedRight="none"
roundedTop"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

Top border radius

roundedTop="none"
roundedTopLeft"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

Top-left border radius

roundedTopLeft="none"
roundedTopRight"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

Top-right border radius

roundedTopRight="none"