Utility Props
Kuma UI includes a broad range of utility props that offer style customization for your components. These are derived from CSS properties and enable a more efficient and organized way to style components.
Space
<Box m="auto" p={2} />Available Props
m, mt, mb, ml, mr, mx, my, p, pt, pb, pl, pr, px, py
Font
<Text lineHeight={2} letterSpacing="1.5rem" />Available Props
hyphenateCharacter, hyphenateLimitChars, hyphens, hangingPunctuation, lineHeight, lineBreak, letterSpacing, orphans, quotes, rubyPosition, unicodeBidi, widows, whiteSpace, wordBreak, wordSpacing, writingMode
Text
<Text textAlign="center" />Available Props
textAlign, textAlignLast, textCombineUpright, textDecoration, textDecorationColor, textDecorationLine, textDecorationSkipInk, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIndent, textJustify, textOrientation, textOverflow, textRendering, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition
Layout
<Box width="200px" zIndex={1} />Available Props
width, minWidth, maxWidth, height, minHeight, maxHeight, display, overflow, position, zIndex, cursor
Flex
<Flex flexDir="row" />Available Props
flexDir, justify, alignItems, alignContent, alignSelf, flex, flexFlow, flexWrap, flexGrow, flexShrink, flexBasis, justifyItems, justifySelf, gap
Color
<Button bg="blue" color="white" />Available Props
bg, bgColor, color, borderColor, outlineColor, accentColor, caretColor, opacity
Border
<Box borderRadius="4px" />Available Props
border, borderWidth, borderStyle, borderRadius, borderTop, borderRight, borderBottom, borderLeft
Outline
Available Props
outline, outlineWidth, outlineStyle, outlineOffset
Position
Available Props
top, right, bottom, left, inset
Shadow
Available Props
textShadow, boxShadow
List
Available Props
listStyle, listStyleImage, listStylePosition, listStyleType
Grid
Available Props
grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnStart, gridRow, gridRowEnd, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, gridGap, gridColumnGap, gridRowGap
Column
Available Props
columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns
Effect
Available Props
transition, transitionDuration, transitionProperty, transitionTimingFunction, transitionDelay, transform, transformBox, transformOrigin, transformStyle
Mask
Available Props
mask, maskBorder, maskBorderMode, maskBorderOutset, maskBorderRepeat, maskBorderSlice, maskBorderSource, maskBorderWidth, maskClip, maskComposite, maskImage, maskMode, maskOrigin, maskPosition, maskRepeat, maskSize, maskType