Utilities

Utility Props

Every Componentry component accepts a standard set of utility props. These provide easy access to theme styling using utility classes.

<Block mt={2}>Easy themed spacing</Block>
// ^ utility prop "mt" converted to utility class "mt-2"

TypeScript customization

Module augmentation enables overriding the library defined utility props values using the UtilityPropsOverrides in componentry/types/utils/utility-classes.

declare module 'componentry/types/utils/utility-classes' {
  // eg customizing allowed fontSize values
  interface UtilityPropsOverrides {
    fontSize: 'body' | 'sm' | 'lg' | 'display'
  }
}

Available Props

Props

Name
Description
active

Sets an active style

string | boolean
alignContent

Sets an `align-content` style

"start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly"
alignItems

Sets an `align-items` style

"start" | "end" | "center" | "stretch" | "baseline"
alignSelf

Sets an `align-self` style

"auto" | "start" | "end" | "center" | "stretch" | "baseline"
as

Component element

ElementType
backgroundColor

Sets a `background-color` style

string
bold

Sets a bold font weight style

boolean
border

Sets a `border` style

boolean
borderBottom

Sets a `border-bottom` style

boolean
borderColor

Sets a `border-color` style

undefined
borderLeft

Sets a `border-left` style

boolean
borderRadius

Sets a `border-radius` style

boolean | "none" | "full" | "sm" | "lg" | "md" | "xl" | "2xl" | "3xl"
borderRight

Sets `border-right` style

boolean
borderStyle

Sets a `border-style` style

"dashed" | "dotted" | "double" | "hidden" | "none" | "solid"
borderTop

Sets a `border-top` style

boolean
borderWidth

Sets a `border-width` style

"0" | "1" | "2" | "4" | "8"
boxShadow

Sets a `box-shadow` style

boolean
color

Sets a `color` style

string
columnGap

Sets a `column-gap` style

"0" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
disabled

Sets a disabled style

boolean
display

Sets a `display` style

"hidden" | "block" | "contents" | "flex" | "flow-root" | "grid" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "list-item"
flexDirection

Sets a `flex-direction` style

"column" | "column-reverse" | "row-reverse" | "row"
flexGrow

Sets a `flex-grow` style

boolean | "0"
flexShrink

Sets a `flex-shrink` style

boolean | "0"
flexWrap

Sets a `flex-wrap` style

"wrap" | "nowrap" | "wrap-reverse"
fontFamily

Sets a `font-family` style

"body" | "mono"
fontSize

Sets a `font-size` style

"inherit" | "base" | "body" | "h1" | "h2" | "h3" | "sm" | "lg"
fontWeight

Sets a `font-weight` style

"light" | "normal" | "bold"
gap

Sets a `gap` style

"0" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
height

Sets a `height` style

HeightBase
invisible

Sets a `visibility: hidden` style

boolean
italic

Sets an italic style

boolean
justifyContent

Sets a `justify-content` style

"start" | "end" | "center" | "space-between" | "space-around" | "space-evenly"
justifyItems

Sets a `justify-items` style

"start" | "end" | "center" | "stretch"
justifySelf

Sets a `justify-self` style

"auto" | "start" | "end" | "center" | "stretch"
letterSpacing

Sets a `letter-spacing` style

"normal" | "tighter" | "tight" | "wide" | "wider" | "widest"
lineHeight

Sets a `line-height` style

"none" | "normal"
m

sets a 'margin' style

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
maxHeight

Sets a `max-height` style

MaxHeightBase
maxWidth

Sets a `max-width` style

MaxWidthBase
mb

Sets a `margin-bottom` style

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
minHeight

Sets a `min-height` style

MinHeightBase
minWidth

Sets a `min-width` style

MinWidthBase
ml

Sets a `margin-left` style

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
mr

Sets a `margin-right` style

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
mt

Sets a `margin-top` style

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
mx

Sets `margin-left` + `margin-right` styles

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
my

Sets `margin-top` + `margin-bottom` styles

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
p

Sets a `padding` style

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
pb

Sets a `padding-bottom` style

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
pl

Sets a `padding-left` style

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
position

Sets a `position` style

"absolute" | "fixed" | "relative" | "static" | "sticky"
pr

Sets a `padding-right` style

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
pt

Sets a `padding-top` style

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
px

Sets `padding-left` + `padding-right` styles

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
py

Sets `padding-top` + `padding-bottom` styles

"0" | "auto" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
rowGap

Sets a `row-gap` style

"0" | "10" | "1" | "1.5" | "2" | "px" | "0.5" | "2.5" | "3" | "4" | "5" | "6" | "8" | "12" | "14" | "16" | "20" | "24" | "32" | "48" | "64"
textAlign

Sets a `text-align` style

"center" | "left" | "right" | "justify"
textTransform

Sets a `text-transform` style

"lowercase" | "uppercase" | "capitalize" | "normal-case"
visible

Sets a `visibility: visible` style

boolean
width

Sets a `width` style

WidthBase
zIndex

Sets a `z-index` style

"auto" | "modal"