Style Props

Style props is a method to change the style of a component just by passing props to the component. It also provides many useful shorthands, improving development efficiency.

Editable example

<Box w="full" p="md" bg="warning" color="white">
  This is Box
</Box>

Copied!

Prop	CSS Property	Theme Tokens
`accentColor`, `accent`	`accent-color`	colors
`alignContent`	`align-content`	none
`alignItems`	`align-items`	none
`alignSelf`	`align-self`	none
`alignmentBaseline`	`alignment-baseline`	none
`all`	`all`	none
`animation`	`animation`	animations
`animationComposition`	`animation-composition`	none
`animationDelay`	`animation-delay`	none
`animationDirection`	`animation-direction`	none
`animationDuration`	`animation-duration`	transitions.duration
`animationFillMode`	`animation-fill-mode`	none
`animationIterationCount`	`animation-iteration-count`	none
`animationName`	`animation-name`	none
`animationPlayState`	`animation-play-state`	none
`animationRange`	`animation-range`	none
`animationRangeEnd`	`animation-range-end`	none
`animationRangeStart`	`animation-range-start`	none
`animationTimeline`	`animation-timeline`	none
`animationTimingFunction`	`animation-timing-function`	transitions.easing
`appearance`	`appearance`	none
`aspectRatio`	`aspect-ratio`	none
`azimuth`	`azimuth`	none
`backdropBlur`	`-ui-backdrop-blur`	blurs
`backdropBrightness`	`-ui-backdrop-brightness`	none
`backdropContrast`	`-ui-backdrop-contrast`	none
`backdropDropShadow`	`-ui-backdrop-drop-shadow`	shadows
`backdropFilter`	`backdrop-filter`	none
`backdropGrayscale`	`-ui-backdrop-grayscale`	none
`backdropHueRotate`	`-ui-backdrop-hue-rotate`	none
`backdropInvert`	`-ui-backdrop-invert`	none
`backdropSaturate`	`-ui-backdrop-saturate`	none
`backdropSepia`	`-ui-backdrop-sepia`	none
`backfaceVisibility`	`backface-visibility`	sizes
`background`, `bg`	`background`	colors
`backgroundAttachment`, `bgAttachment`	`background-attachment`	none
`backgroundBlendMode`, `bgBlendMode`	`background-blend-mode`	none
`backgroundClip`, `bgClip`	`background-clip`	none
`backgroundColor`, `bgColor`	`background-color`	colors
`backgroundImage`, `bgGradient`, `bgImage`, `bgImg`	`background-image`	gradients
`backgroundOrigin`, `bgOrigin`	`background-origin`	none
`backgroundPosition`, `bgPosition`	`background-position`	none
`backgroundPositionX`, `bgPositionX`, `bgPosX`	`background-position-x`	none
`backgroundPositionY`, `bgPositionY`, `bgPosY`	`background-position-y`	none
`backgroundRepeat`, `bgRepeat`	`background-repeat`	none
`backgroundSize`, `bgSize`	`background-size`	none
`baselineShift`	`baseline-shift`	none
`blockSize`	`block-size`	sizes
`blur`	`-ui-blur`	blurs
`border`	`border`	borders
`borderBlock`	`border-block`	borders
`borderBlockColor`	`border-block-color`	colors
`borderBlockEnd`	`border-block-end`	borders
`borderBlockEndColor`	`border-block-end-color`	colors
`borderBlockEndStyle`	`border-block-end-style`	none
`borderBlockEndWidth`	`border-block-end-width`	none
`borderBlockStart`	`border-block-start`	borders
`borderBlockStartColor`	`border-block-start-color`	colors
`borderBlockStartStyle`	`border-block-start-style`	none
`borderBlockStartWidth`	`border-block-start-width`	none
`borderBlockStyle`	`border-block-style`	none
`borderBlockWidth`	`border-block-width`	none
`borderBottom`	`border-bottom`	borders
`borderBottomColor`	`border-bottom-color`	colors
`borderBottomLeftRadius`, `roundedBottomLeft`	`border-bottom-left-radius`	radii
`borderBottomRadius`, `roundedBottom`	`border-bottom-left-radius` `border-bottom-right-radius`	radii
`borderBottomRightRadius`, `roundedBottomRight`	`border-bottom-right-radius`	radii
`borderBottomStyle`	`border-bottom-style`	none
`borderBottomWidth`	`border-bottom-width`	none
`borderCollapse`	`border-collapse`	none
`borderColor`	`border-color`	colors
`borderEndEndRadius`, `borderBottomEndRadius`, `roundedBottomEnd`	`border-end-end-radius`	radii
`borderEndStartRadius`, `borderBottomStartRadius`, `roundedBottomStart`	`border-end-start-radius`	radii
`borderImage`	`border-image`	borders
`borderImageOutset`	`border-image-outset`	none
`borderImageRepeat`	`border-image-repeat`	none
`borderImageSlice`	`border-image-slice`	none
`borderImageSource`	`border-image-source`	gradients
`borderImageWidth`	`border-image-width`	none
`borderInline`	`border-inline`	borders
`borderInlineColor`	`border-inline-color`	colors
`borderInlineEnd`, `borderEnd`	`border-inline-end`	borders
`borderInlineEndColor`, `borderEndColor`	`border-inline-end-color`	colors
`borderInlineEndRadius`, `borderEndRadius`, `roundedEnd`	`border-end-start-radius` `border-end-end-radius`	radii
`borderInlineEndStyle`, `borderEndStyle`	`border-inline-end-style`	none
`borderInlineEndWidth`, `borderEndWidth`	`border-inline-end-width`	none
`borderInlineStart`, `borderStart`	`border-inline-start`	borders
`borderInlineStartColor`, `borderStartColor`	`border-inline-start-color`	colors
`borderInlineStartRadius`, `borderStartRadius`, `roundedStart`	`border-start-start-radius` `border-start-end-radius`	radii
`borderInlineStartStyle`, `borderStartStyle`	`border-inline-start-style`	none
`borderInlineStartWidth`, `borderStartWidth`	`border-inline-start-width`	none
`borderInlineStyle`	`border-inline-style`	none
`borderInlineWidth`	`border-inline-width`	none
`borderLeft`	`border-left`	borders
`borderLeftColor`	`border-left-color`	colors
`borderLeftRadius`, `roundedLeft`	`border-top-left-radius` `border-bottom-left-radius`	radii
`borderLeftStyle`	`border-left-style`	none
`borderLeftWidth`	`border-left-width`	none
`borderRadius`, `rounded`	`border-radius`	radii
`borderRight`	`border-right`	borders
`borderRightColor`	`border-right-color`	colors
`borderRightRadius`, `roundedRight`	`border-top-right-radius` `border-bottom-right-radius`	radii
`borderRightStyle`	`border-right-style`	none
`borderRightWidth`	`border-right-width`	none
`borderSpacing`	`border-spacing`	none
`borderStartEndRadius`, `borderTopEndRadius`, `roundedTopEnd`	`border-start-end-radius`	radii
`borderStartStartRadius`, `borderTopStartRadius`, `roundedTopStart`	`border-start-start-radius`	radii
`borderStyle`	`border-style`	none
`borderTop`	`border-top`	borders
`borderTopColor`	`border-top-color`	colors
`borderTopLeftRadius`, `roundedTopLeft`	`border-top-left-radius`	radii
`borderTopRadius`, `roundedTop`	`border-top-left-radius` `border-top-right-radius`	radii
`borderTopRightRadius`, `roundedTopRight`	`border-top-right-radius`	radii
`borderTopStyle`	`border-top-style`	none
`borderTopWidth`	`border-top-width`	none
`borderWidth`	`border-width`	none
`borderX`	`border-left` `border-right`	borders
`borderY`	`border-top` `border-bottom`	borders
`bottom`	`bottom`	spaces
`boxAlign`	`box-align`	none
`boxDecorationBreak`	`box-decoration-break`	none
`boxDirection`	`box-direction`	none
`boxFlex`	`box-flex`	none
`boxFlexGroup`	`box-flex-group`	none
`boxLines`	`box-lines`	none
`boxOrdinalGroup`	`box-ordinal-group`	none
`boxOrient`	`box-orient`	none
`boxPack`	`box-pack`	none
`boxShadow`, `shadow`	`box-shadow`	shadows
`boxSize`	`width` `height`	sizes
`boxSizing`	`box-sizing`	none
`breakAfter`	`break-after`	none
`breakBefore`	`break-before`	none
`breakInside`	`break-inside`	none
`brightness`	`-ui-brightness`	none
`captionSide`	`caption-side`	none
`caretColor`, `caret`	`caret-color`	colors
`clear`	`clear`	none
`clip`	`clip`	none
`clipPath`	`clip-path`	none
`clipRule`	`clip-rule`	none
`color`, `textColor`	`color`	colors
`colorInterpolation`	`color-interpolation`	none
`colorMode`	`color-scheme`	none
`columnCount`	`column-count`	none
`columnFill`	`column-fill`	none
`columnGap`, `gapX`, `gx`	`column-gap`	spaces
`columnRule`	`column-rule`	none
`columnRuleColor`	`column-rule-color`	colors
`columnRuleStyle`	`column-rule-style`	none
`columnRuleWidth`	`column-rule-width`	none
`columnSpan`	`column-span`	none
`columnWidth`	`column-width`	sizes
`columns`	`columns`	none
`contain`	`contain`	none
`containIntrinsicBlockSize`	`contain-intrinsic-block-size`	none
`containIntrinsicHeight`	`contain-intrinsic-height`	none
`containIntrinsicInlineSize`	`contain-intrinsic-inline-size`	none
`containIntrinsicSize`	`contain-intrinsic-size`	none
`containIntrinsicWidth`	`contain-intrinsic-width`	sizes
`container`	`container`	none
`containerName`	`container-name`	none
`containerType`	`container-type`	none
`content`	`content`	none
`contentVisibility`	`content-visibility`	none
`contrast`	`-ui-contrast`	none
`counterIncrement`	`counter-increment`	none
`counterReset`	`counter-reset`	none
`counterSet`	`counter-set`	none
`cursor`	`cursor`	none
`direction`	`direction`	none
`display`	`display`	none
`dominantBaseline`	`dominant-baseline`	none
`dropShadow`	`-ui-drop-shadow`	shadows
`emptyCells`	`empty-cells`	none
`fill`	`fill`	colors
`fillOpacity`	`fill-opacity`	none
`fillRule`	`fill-rule`	none
`filter`	`filter`	none
`flex`	`flex`	none
`flexBasis`	`flex-basis`	sizes
`flexDirection`, `flexDir`	`flex-direction`	none
`flexFlow`	`flex-flow`	none
`flexGrow`	`flex-grow`	none
`flexShrink`	`flex-shrink`	none
`flexWrap`	`flex-wrap`	none
`float`	`float`	none
`floodColor`	`flood-color`	colors
`floodOpacity`	`flood-opacity`	none
`font`	`font`	none
`fontFamily`	`font-family`	fonts
`fontFeatureSettings`	`font-feature-settings`	none
`fontKerning`	`font-kerning`	none
`fontLanguageOverride`	`font-language-override`	none
`fontOpticalSizing`	`font-optical-sizing`	none
`fontPalette`	`font-palette`	none
`fontSize`, `text`	`font-size`	fontSizes
`fontSizeAdjust`	`font-size-adjust`	none
`fontSmooth`	`font-smooth`	none
`fontStretch`	`font-stretch`	none
`fontStyle`	`font-style`	none
`fontSynthesis`	`font-synthesis`	none
`fontSynthesisPosition`	`font-synthesis-position`	none
`fontSynthesisSmallCaps`	`font-synthesis-small-caps`	none
`fontSynthesisStyle`	`font-synthesis-style`	none
`fontSynthesisWeight`	`font-synthesis-weight`	none
`fontVariant`	`font-variant`	none
`fontVariantAlternates`	`font-variant-alternates`	none
`fontVariantCaps`	`font-variant-caps`	none
`fontVariantEastAsian`	`font-variant-east-asian`	none
`fontVariantEmoji`	`font-variant-emoji`	none
`fontVariantLigatures`	`font-variant-ligatures`	none
`fontVariantNumeric`	`font-variant-numeric`	none
`fontVariantPosition`	`font-variant-position`	none
`fontVariationSettings`	`font-variation-settings`	none
`fontWeight`	`font-weight`	fontWeights
`forcedColorAdjust`	`forced-color-adjust`	none
`gap`, `g`	`gap`	spaces
`glyphOrientationVertical`	`glyph-orientation-vertical`	none
`grayscale`	`-ui-grayscale`	none
`grid`	`grid`	none
`gridArea`	`grid-area`	none
`gridAutoColumns`	`grid-auto-columns`	sizes
`gridAutoFlow`	`grid-auto-flow`	none
`gridAutoRows`	`grid-auto-rows`	sizes
`gridColumn`	`grid-column`	none
`gridColumnEnd`	`grid-column-end`	none
`gridColumnStart`	`grid-column-start`	none
`gridRow`	`grid-row`	none
`gridRowEnd`	`grid-row-end`	none
`gridRowStart`	`grid-row-start`	none
`gridTemplate`	`grid-template`	none
`gridTemplateAreas`	`grid-template-areas`	none
`gridTemplateColumns`	`grid-template-columns`	sizes
`gridTemplateRows`	`grid-template-rows`	sizes
`hangingPunctuation`	`hanging-punctuation`	none
`height`, `h`	`height`	sizes
`hueRotate`	`-ui-hue-rotate`	none
`hyphenateCharacter`	`hyphenate-character`	none
`hyphenateLimitChars`	`hyphenate-limit-chars`	none
`hyphens`	`hyphens`	none
`imageOrientation`	`image-orientation`	none
`imageRendering`	`image-rendering`	none
`imageResolution`	`image-resolution`	none
`initialLetter`	`initial-letter`	none
`inlineSize`	`inline-size`	sizes
`inset`	`inset`	spaces
`insetBlock`	`inset-block`	spaces
`insetBlockEnd`	`inset-block-end`	spaces
`insetBlockStart`	`inset-block-start`	spaces
`insetInline`	`inset-inline`	spaces
`insetInlineEnd`, `insetEnd`	`inset-inline-end`	spaces
`insetInlineStart`, `insetStart`	`inset-inline-start`	spaces
`insetX`	`left` `right`	spaces
`insetY`	`top` `bottom`	spaces
`invert`	`-ui-invert`	none
`isolation`	`isolation`	none
`justifyContent`	`justify-content`	none
`justifyItems`	`justify-items`	none
`justifySelf`	`justify-self`	none
`left`	`left`	spaces
`letterSpacing`, `tracking`	`letter-spacing`	letterSpacings
`lightingColor`	`lighting-color`	colors
`lineBreak`	`line-break`	none
`lineHeight`, `leading`	`line-height`	lineHeights
`lineHeightStep`	`line-height-step`	none
`listStyle`	`list-style`	none
`listStyleImage`, `listStyleImg`	`list-style-image`	gradients
`listStylePosition`, `listStylePos`	`list-style-position`	none
`listStyleType`	`list-style-type`	none
`margin`, `m`	`margin`	spaces
`marginBlock`	`margin-block`	spaces
`marginBlockEnd`	`margin-block-end`	spaces
`marginBlockStart`	`margin-block-start`	spaces
`marginBottom`, `mb`	`margin-bottom`	spaces
`marginInline`	`margin-inline`	spaces
`marginInlineEnd`, `marginEnd`, `me`	`margin-inline-end`	spaces
`marginInlineStart`, `marginStart`, `ms`	`margin-inline-start`	spaces
`marginLeft`, `ml`	`margin-left`	spaces
`marginRight`, `mr`	`margin-right`	spaces
`marginTop`, `mt`	`margin-top`	spaces
`marginTrim`	`margin-trim`	none
`marginX`, `mx`	`margin-inline-start` `margin-inline-end`	spaces
`marginY`, `my`	`margin-top` `margin-bottom`	spaces
`marker`	`marker`	none
`markerEnd`	`marker-end`	none
`markerMid`	`marker-mid`	none
`markerStart`	`marker-start`	none
`mask`	`mask`	none
`maskBorder`	`mask-border`	none
`maskBorderMode`	`mask-border-mode`	none
`maskBorderOutset`	`mask-border-outset`	none
`maskBorderRepeat`	`mask-border-repeat`	none
`maskBorderSlice`	`mask-border-slice`	none
`maskBorderSource`	`mask-border-source`	none
`maskBorderWidth`	`mask-border-width`	none
`maskClip`	`mask-clip`	none
`maskComposite`	`mask-composite`	none
`maskImage`	`mask-image`	gradients
`maskMode`	`mask-mode`	none
`maskOrigin`	`mask-origin`	none
`maskPosition`	`mask-position`	none
`maskRepeat`	`mask-repeat`	none
`maskSize`	`mask-size`	none
`maskType`	`mask-type`	none
`masonryAutoFlow`	`masonry-auto-flow`	none
`mathDepth`	`math-depth`	none
`mathShift`	`math-shift`	none
`mathStyle`	`math-style`	none
`maxBlockSize`	`max-block-size`	sizes
`maxBoxSize`	`max-width` `max-height`	sizes
`maxHeight`, `maxH`	`max-height`	sizes
`maxInlineSize`	`max-inline-size`	sizes
`maxWidth`, `maxW`	`max-width`	sizes
`minBlockSize`	`min-block-size`	sizes
`minBoxSize`	`min-width` `min-height`	sizes
`minHeight`, `minH`	`min-height`	sizes
`minInlineSize`	`min-inline-size`	sizes
`minWidth`, `minW`	`min-width`	sizes
`mixBlendMode`, `blendMode`	`mix-blend-mode`	none
`objectFit`	`object-fit`	none
`objectPosition`	`object-position`	none
`offset`	`offset`	none
`offsetAnchor`	`offset-anchor`	none
`offsetDistance`	`offset-distance`	none
`offsetPath`	`offset-path`	none
`offsetPosition`	`offset-position`	none
`offsetRotate`	`offset-rotate`	none
`opacity`	`opacity`	none
`order`	`order`	none
`orphans`	`orphans`	none
`outline`	`outline`	none
`outlineColor`	`outline-color`	colors
`outlineOffset`	`outline-offset`	none
`outlineStyle`	`outline-style`	none
`outlineWidth`	`outline-width`	none
`overflow`	`overflow`	none
`overflowAnchor`	`overflow-anchor`	none
`overflowBlock`	`overflow-block`	none
`overflowClipMargin`	`overflow-clip-margin`	none
`overflowInline`	`overflow-inline`	none
`overflowWrap`	`overflow-wrap`	none
`overflowX`	`overflow-x`	none
`overflowY`	`overflow-y`	none
`overlay`	`overlay`	none
`overscrollBehavior`, `overscroll`	`overscroll-behavior`	none
`overscrollBehaviorBlock`	`overscroll-behavior-block`	none
`overscrollBehaviorInline`	`overscroll-behavior-inline`	none
`overscrollBehaviorX`, `overscrollX`	`overscroll-behavior-x`	none
`overscrollBehaviorY`, `overscrollY`	`overscroll-behavior-y`	none
`padding`, `p`	`padding`	spaces
`paddingBlock`	`padding-block`	spaces
`paddingBlockEnd`	`padding-block-end`	spaces
`paddingBlockStart`	`padding-block-start`	spaces
`paddingBottom`, `pb`	`padding-bottom`	spaces
`paddingInline`	`padding-inline`	spaces
`paddingInlineEnd`, `paddingEnd`, `pe`	`padding-inline-end`	spaces
`paddingInlineStart`, `paddingStart`, `ps`	`padding-inline-start`	spaces
`paddingLeft`, `pl`	`padding-left`	spaces
`paddingRight`, `pr`	`padding-right`	spaces
`paddingTop`, `pt`	`padding-top`	spaces
`paddingX`, `px`	`padding-inline-start` `padding-inline-end`	spaces
`paddingY`, `py`	`padding-top` `padding-bottom`	spaces
`page`	`page`	none
`pageBreakAfter`	`page-break-after`	none
`pageBreakBefore`	`page-break-before`	none
`pageBreakInside`	`page-break-inside`	none
`paintOrder`	`paint-order`	none
`perspective`	`perspective`	none
`perspectiveOrigin`	`perspective-origin`	none
`placeContent`	`place-content`	none
`placeItems`	`place-items`	none
`placeSelf`	`place-self`	none
`pointerEvents`	`pointer-events`	none
`position`, `pos`	`position`	none
`printColorAdjust`	`print-color-adjust`	none
`quotes`	`quotes`	none
`resize`	`resize`	none
`right`	`right`	spaces
`rotate`	`-ui-rotate`	none
`rowGap`, `gapY`, `gy`	`row-gap`	spaces
`rubyAlign`	`ruby-align`	none
`rubyPosition`	`ruby-position`	none
`saturate`	`-ui-saturate`	none
`scale`	`-ui-scale-x` `-ui-scale-y`	none
`scaleX`	`-ui-scale-x`	none
`scaleY`	`-ui-scale-y`	none
`scrollBehavior`	`scroll-behavior`	none
`scrollMargin`	`scroll-margin`	spaces
`scrollMarginBlock`	`scroll-margin-block`	none
`scrollMarginBlockEnd`	`scroll-margin-block-end`	none
`scrollMarginBlockStart`	`scroll-margin-block-start`	none
`scrollMarginBottom`	`scroll-margin-bottom`	spaces
`scrollMarginInline`	`scroll-margin-inline`	none
`scrollMarginInlineEnd`	`scroll-margin-inline-end`	none
`scrollMarginInlineStart`	`scroll-margin-inline-start`	none
`scrollMarginLeft`	`scroll-margin-left`	spaces
`scrollMarginRight`	`scroll-margin-right`	spaces
`scrollMarginTop`	`scroll-margin-top`	spaces
`scrollMarginX`	`scroll-margin-left` `scroll-margin-right`	spaces
`scrollMarginY`	`scroll-margin-top` `scroll-margin-bottom`	spaces
`scrollPadding`	`scroll-padding`	spaces
`scrollPaddingBlock`	`scroll-padding-block`	none
`scrollPaddingBlockEnd`	`scroll-padding-block-end`	none
`scrollPaddingBlockStart`	`scroll-padding-block-start`	none
`scrollPaddingBottom`	`scroll-padding-bottom`	spaces
`scrollPaddingInline`	`scroll-padding-inline`	none
`scrollPaddingInlineEnd`	`scroll-padding-inline-end`	none
`scrollPaddingInlineStart`	`scroll-padding-inline-start`	none
`scrollPaddingLeft`	`scroll-padding-left`	spaces
`scrollPaddingRight`	`scroll-padding-right`	spaces
`scrollPaddingTop`	`scroll-padding-top`	spaces
`scrollPaddingX`	`scroll-padding-left` `scroll-padding-right`	spaces
`scrollPaddingY`	`scroll-padding-top` `scroll-padding-bottom`	spaces
`scrollSnapAlign`	`scroll-snap-align`	none
`scrollSnapStop`	`scroll-snap-stop`	none
`scrollSnapType`	`scroll-snap-type`	none
`scrollTimeline`	`scroll-timeline`	none
`scrollTimelineAxis`	`scroll-timeline-axis`	none
`scrollTimelineName`	`scroll-timeline-name`	none
`scrollbarColor`	`scrollbar-color`	colors
`scrollbarGutter`	`scrollbar-gutter`	none
`scrollbarWidth`	`scrollbar-width`	none
`sepia`	`-ui-sepia`	none
`shapeImageThreshold`	`shape-image-threshold`	none
`shapeMargin`	`shape-margin`	none
`shapeOutside`	`shape-outside`	none
`shapeRendering`	`shape-rendering`	none
`skewX`	`-ui-skew-x`	none
`skewY`	`-ui-skew-y`	none
`stopColor`	`stop-color`	none
`stopOpacity`	`stop-opacity`	none
`stroke`	`stroke`	colors
`strokeDasharray`	`stroke-dasharray`	none
`strokeDashoffset`	`stroke-dashoffset`	none
`strokeLinecap`	`stroke-linecap`	none
`strokeLinejoin`	`stroke-linejoin`	none
`strokeMiterlimit`	`stroke-miterlimit`	none
`strokeOpacity`	`stroke-opacity`	none
`strokeWidth`	`stroke-width`	none
`tabSize`	`tab-size`	none
`tableLayout`	`table-layout`	none
`textAlign`	`text-align`	none
`textAlignLast`	`text-align-last`	none
`textAnchor`	`text-anchor`	none
`textCombineUpright`	`text-combine-upright`	none
`textDecoration`, `textDecor`	`text-decoration`	none
`textDecorationColor`	`text-decoration-color`	colors
`textDecorationLine`	`text-decoration-line`	none
`textDecorationSkip`	`text-decoration-skip`	none
`textDecorationSkipInk`	`text-decoration-skip-ink`	none
`textDecorationStyle`	`text-decoration-style`	none
`textDecorationThickness`	`text-decoration-thickness`	none
`textEmphasis`	`text-emphasis`	none
`textEmphasisColor`	`text-emphasis-color`	colors
`textEmphasisPosition`	`text-emphasis-position`	none
`textEmphasisStyle`	`text-emphasis-style`	none
`textIndent`	`text-indent`	none
`textJustify`	`text-justify`	none
`textOrientation`	`text-orientation`	none
`textOverflow`	`text-overflow`	none
`textRendering`	`text-rendering`	none
`textShadow`	`text-shadow`	shadows
`textSizeAdjust`	`text-size-adjust`	none
`textTransform`	`text-transform`	none
`textUnderlineOffset`	`text-underline-offset`	none
`textUnderlinePosition`	`text-underline-position`	none
`textWrap`	`text-wrap`	none
`timelineScope`	`timeline-scope`	none
`top`	`top`	spaces
`touchAction`	`touch-action`	none
`transform`	`transform`	none
`transformBox`	`transform-box`	none
`transformOrigin`	`transform-origin`	none
`transformStyle`	`transform-style`	none
`transition`	`transition`	none
`transitionBehavior`	`transition-behavior`	none
`transitionDelay`	`transition-delay`	none
`transitionDuration`	`transition-duration`	transitions.duration
`transitionProperty`	`transition-property`	transitions.property
`transitionTimingFunction`	`transition-timing-function`	transitions.easing
`translate`	`translate`	none
`translateX`	`-ui-translate-x`	spaces
`translateY`	`-ui-translate-y`	spaces
`unicodeBidi`	`unicode-bidi`	none
`userSelect`	`user-select`	none
`vectorEffect`	`vector-effect`	none
`verticalAlign`	`vertical-align`	none
`viewTimeline`	`view-timeline`	none
`viewTimelineAxis`	`view-timeline-axis`	none
`viewTimelineInset`	`view-timeline-inset`	none
`viewTimelineName`	`view-timeline-name`	none
`viewTransitionName`	`view-transition-name`	none
`visibility`	`visibility`	none
`whiteSpace`	`white-space`	none
`whiteSpaceCollapse`	`white-space-collapse`	none
`widows`	`widows`	none
`width`, `w`	`width`	sizes
`willChange`	`will-change`	none
`wordBreak`	`word-break`	none
`wordSpacing`	`word-spacing`	none
`writingMode`	`writing-mode`	none
`zIndex`, `z`	`z-index`	zIndices
`zoom`	`zoom`	none

When using blur, brightness, backdropBlur, backdropBrightness, etc., you need to set filter and backdropFilter to auto.

When using translateX, scale, skewX, etc., you need to set auto or auto-3d to transform.

Pseudo Elements and Selectors

Prop	CSS Property	Theme Tokens
`_accept`	`&[data-accept]`	none
`_active`	`&:active` `&[data-active]`	none
`_after`	`&::after`	none
`_anyLink`	`&:any-link` `&[data-any-link]`	none
`_autofill`	`&:autofill` `&:-webkit-autofill`	none
`_backdrop`	`&::backdrop`	none
`_before`	`&::before`	none
`_between`	`&[data-between]`	none
`_blank`	`&:blank` `&[data-blank]`	none
`_checked`	`&:checked` `&[data-checked]` `&[aria-checked=true]`	none
`_cue`	`&::cue`	none
`_cueRegion`	`&::cue-region`	none
`_dark`	`.ui-dark &:not([data-mode])` `[data-mode=dark] &:not([data-mode])` `&[data-mode=dark]`	none
`_default`	`&:default`	none
`_disabled`	`&:disabled` `&[disabled]` `&[aria-disabled=true]` `&[data-disabled]`	none
`_empty`	`&:empty`	none
`_enabled`	`&:enabled` `&[data-enabled]`	none
`_end`	`&[data-end]`	none
`_even`	`&:nth-of-type(even)`	none
`_expanded`	`&[data-expanded]` `&[aria-expanded=true]`	none
`_fileSelector`	`&::file-selector-button`	none
`_filled`	`&[data-filled]`	none
`_first`	`&:first-of-type`	none
`_firstLetter`	`&::first-letter`	none
`_firstLine`	`&::first-line`	none
`_focus`	`&:focus` `&[data-focus]`	none
`_focusVisible`	`&:focus-visible` `&[data-focus-visible]`	none
`_focusWithin`	`&:focus-within` `&[data-focus-within]`	none
`_fullScreen`	`&:fullscreen`	none
`_grabbed`	`&[data-grabbed]` `&[aria-grabbed=true]`	none
`_groupAccept`	`[role=group][data-accept] &` `[data-group][data-accept] &` `.group[data-accept] &`	none
`_groupActive`	`[role=group]:active &` `[role=group][data-active] &` `[data-group]:active &` `[data-group][data-active] &` `.group:active &` `.group[data-active] &`	none
`_groupBlank`	`[role=group]:blank &` `[role=group][data-blank] &` `[data-group]:blank &` `[data-group][data-blank] &` `.group:blank &` `.group[data-blank] &`	none
`_groupChecked`	`[role=group]:checked &` `[role=group][data-checked] &` `[role=group][aria-checked=true] &` `[data-group]:checked &` `[data-group][data-checked] &` `[data-group][aria-checked=true] &` `.group:checked &` `.group[data-checked] &` `.group[aria-checked=true] &`	none
`_groupDisabled`	`[role=group]:disabled &` `[role=group][disabled] &` `[role=group][aria-disabled=true] &` `[role=group][data-disabled] &` `[data-group]:disabled &` `[data-group][disabled] &` `[data-group][aria-disabled=true] &` `[data-group][data-disabled] &` `.group:disabled &` `.group[disabled] &` `.group[aria-disabled=true] &` `.group[data-disabled] &`	none
`_groupEnabled`	`[role=group]:enabled &` `[role=group][data-enabled] &` `[data-group]:enabled &` `[data-group][data-enabled] &` `.group:enabled &` `.group[data-enabled] &`	none
`_groupExpanded`	`[role=group][data-expanded] &` `[role=group][aria-expanded=true] &` `[data-group][data-expanded] &` `[data-group][aria-expanded=true] &` `.group[data-expanded] &` `.group[aria-expanded=true] &`	none
`_groupFocus`	`[role=group]:focus &` `[role=group][data-focus] &` `[data-group]:focus &` `[data-group][data-focus] &` `.group:focus &` `.group[data-focus] &`	none
`_groupFocusVisible`	`[role=group]:focus-visible &` `[role=group][data-focus-visible] &` `[data-group]:focus-visible &` `[data-group][data-focus-visible] &` `.group:focus-visible &` `.group[data-focus-visible] &`	none
`_groupFocusWithin`	`[role=group]:focus-within &` `[role=group][data-focus-within] &` `[data-group]:focus-within &` `[data-group][data-focus-within] &` `.group:focus-within &` `.group[data-focus-within] &`	none
`_groupGrabbed`	`[role=group][data-grabbed] &` `[role=group][aria-grabbed=true] &` `[data-group][data-grabbed] &` `[data-group][aria-grabbed=true] &` `.group[data-grabbed] &` `.group[aria-grabbed=true] &`	none
`_groupHorizontal`	`[role=group]:horizontal &` `[role=group][data-orientation=horizontal] &` `[role=group][aria-orientation=horizontal] &` `[data-group]:horizontal &` `[data-group][data-orientation=horizontal] &` `[data-group][aria-orientation=horizontal] &` `.group:horizontal &` `.group[data-orientation=horizontal] &` `.group[aria-orientation=horizontal] &`	none
`_groupHover`	`[role=group]:hover &` `[role=group][data-hover] &` `[data-group]:hover &` `[data-group][data-hover] &` `.group:hover &` `.group[data-hover] &`	none
`_groupIdle`	`[role=group][data-idle] &` `[data-group][data-idle] &` `.group[data-idle] &`	none
`_groupInvalid`	`[role=group][data-invalid] &` `[role=group][aria-invalid=true] &` `[data-group][data-invalid] &` `[data-group][aria-invalid=true] &` `.group[data-invalid] &` `.group[aria-invalid=true] &`	none
`_groupLoaded`	`[role=group][data-loaded] &` `[data-group][data-loaded] &` `.group[data-loaded] &`	none
`_groupLoading`	`[role=group][data-loading] &` `[role=group][aria-busy=true] &` `[data-group][data-loading] &` `[data-group][aria-busy=true] &` `.group[data-loading] &` `.group[aria-busy=true] &`	none
`_groupOptional`	`[role=group]:optional &` `[role=group][data-optional] &` `[data-group]:optional &` `[data-group][data-optional] &` `.group:optional &` `.group[data-optional] &`	none
`_groupPlaceholderShown`	`[role=group]:placeholder-shown &` `[data-group]:placeholder-shown &` `.group:placeholder-shown &`	none
`_groupPressed`	`[role=group][data-pressed] &` `[role=group][aria-pressed=true] &` `[data-group][data-pressed] &` `[data-group][aria-pressed=true] &` `.group[data-pressed] &` `.group[aria-pressed=true] &`	none
`_groupReadOnly`	`[role=group][readonly] &` `[role=group][data-readonly] &` `[role=group][aria-readonly=true] &` `[data-group][readonly] &` `[data-group][data-readonly] &` `[data-group][aria-readonly=true] &` `.group[readonly] &` `.group[data-readonly] &` `.group[aria-readonly=true] &`	none
`_groupReadWrite`	`[role=group]:read-write &` `[role=group][data-read-write] &` `[data-group]:read-write &` `[data-group][data-read-write] &` `.group:read-write &` `.group[data-read-write] &`	none
`_groupReject`	`[role=group][data-reject] &` `[data-group][data-reject] &` `.group[data-reject] &`	none
`_groupRequired`	`[role=group]:required &` `[role=group][required] &` `[data-group]:required &` `[data-group][required] &` `.group:required &` `.group[required] &`	none
`_groupSelected`	`[role=group][data-selected] &` `[role=group][aria-selected=true] &` `[data-group][data-selected] &` `[data-group][aria-selected=true] &` `.group[data-selected] &` `.group[aria-selected=true] &`	none
`_groupUserInvalid`	`[role=group]:user-invalid &` `[role=group][data-user-invalid] &` `[data-group]:user-invalid &` `[data-group][data-user-invalid] &` `.group:user-invalid &` `.group[data-user-invalid] &`	none
`_groupValid`	`[role=group]:valid &` `[role=group][data-valid] &` `[data-group]:valid &` `[data-group][data-valid] &` `.group:valid &` `.group[data-valid] &`	none
`_groupVertical`	`[role=group]:vertical &` `[role=group][data-orientation=vertical] &` `[role=group][aria-orientation=vertical] &` `[data-group]:vertical &` `[data-group][data-orientation=vertical] &` `[data-group][aria-orientation=vertical] &` `.group:vertical &` `.group[data-orientation=vertical] &` `.group[aria-orientation=vertical] &`	none
`_hidden`	`&[hidden]` `&[data-hidden]`	none
`_holiday`	`&[data-holiday]`	none
`_horizontal`	`&:horizontal` `&[data-orientation=horizontal]` `&[aria-orientation=horizontal]`	none
`_hover`	`&:hover` `&[data-hover]`	none
`_idle`	`&[data-idle]`	none
`_inRange`	`&:in-range` `&[data-in-range]`	none
`_indeterminate`	`&:indeterminate` `&[data-indeterminate]` `&[aria-checked=mixed]`	none
`_invalid`	`&[data-invalid]` `&[aria-invalid=true]`	none
`_landscape`	`@media ("orientation": landscape)`	none
`_last`	`&:last-of-type`	none
`_light`	`.ui-light &:not([data-mode])` `[data-mode=light] &:not([data-mode])` `&[data-mode=light]`	none
`_link`	`&:link` `&[data-link]`	none
`_loaded`	`&[data-loaded]`	none
`_loading`	`&[data-loading]` `&[aria-busy=true]`	none
`_marker`	`&::marker`	none
`_mediaDark`	`@media (prefers-color-"scheme": dark)`	none
`_mediaLight`	`@media (prefers-color-"scheme": light)`	none
`_mediaReduceMotion`	`@media (prefers-reduced-"motion": reduce)`	none
`_modal`	`&:modal`	none
`_nativeActive`	`&:active`	none
`_nativeChecked`	`&:checked`	none
`_nativeDisabled`	`&:disabled` `&[disabled]`	none
`_nativeFocus`	`&:focus`	none
`_nativeFocusVisible`	`&:focus-visible`	none
`_nativeFocusWithin`	`&:focus-within`	none
`_nativeHidden`	`&[hidden]`	none
`_nativeHover`	`&:hover`	none
`_nativeReadOnly`	`&[readonly]` `&[aria-readonly=true]`	none
`_nativeTarget`	`&:target`	none
`_nativeValid`	`&:valid`	none
`_notAllowed`	`&[data-not-allowed]`	none
`_notFirst`	`&:not(:first-of-type)`	none
`_notLast`	`&:not(:last-of-type)`	none
`_notTarget`	`&:not(:target)`	none
`_odd`	`&:nth-of-type(odd)`	none
`_only`	`&:only-of-type`	none
`_optional`	`&:optional` `&[data-optional]`	none
`_outRange`	`&:out-of-range` `&[data-out-of-range]`	none
`_outside`	`&:where([data-outside])`	none
`_paused`	`&:paused` `&[data-paused]`	none
`_peerAccept`	`[data-peer][data-accept] ~ &` `.peer[data-accept] ~ &`	none
`_peerActive`	`[data-peer]:active ~ &` `[data-peer][data-active] ~ &` `.peer:active ~ &` `.peer[data-active] ~ &`	none
`_peerBlank`	`[data-peer]:blank ~ &` `[data-peer][data-blank] ~ &` `.peer:blank ~ &` `.peer[data-blank] ~ &`	none
`_peerChecked`	`[data-peer]:checked ~ &` `[data-peer][data-checked] ~ &` `[data-peer][aria-checked=true] ~ &` `.peer:checked ~ &` `.peer[data-checked] ~ &` `.peer[aria-checked=true] ~ &`	none
`_peerDisabled`	`[data-peer]:disabled ~ &` `[data-peer][disabled] ~ &` `[data-peer][aria-disabled=true] ~ &` `[data-peer][data-disabled] ~ &` `.peer:disabled ~ &` `.peer[disabled] ~ &` `.peer[aria-disabled=true] ~ &` `.peer[data-disabled] ~ &`	none
`_peerEnabled`	`[data-peer]:enabled ~ &` `[data-peer][data-enabled] ~ &` `.peer:enabled ~ &` `.peer[data-enabled] ~ &`	none
`_peerExpanded`	`[data-peer][data-expanded] ~ &` `[data-peer][aria-expanded=true] ~ &` `.peer[data-expanded] ~ &` `.peer[aria-expanded=true] ~ &`	none
`_peerFocus`	`[data-peer]:focus ~ &` `[data-peer][data-focus] ~ &` `.peer:focus ~ &` `.peer[data-focus] ~ &`	none
`_peerFocusVisible`	`[data-peer]:focus-visible ~ &` `[data-peer][data-focus-visible] ~ &` `.peer:focus-visible ~ &` `.peer[data-focus-visible] ~ &`	none
`_peerFocusWithin`	`[data-peer]:focus-within ~ &` `[data-peer][data-focus-within] ~ &` `.peer:focus-within ~ &` `.peer[data-focus-within] ~ &`	none
`_peerGrabbed`	`[data-peer][data-grabbed] ~ &` `[data-peer][aria-grabbed=true] ~ &` `.peer[data-grabbed] ~ &` `.peer[aria-grabbed=true] ~ &`	none
`_peerHorizontal`	`[data-peer]:horizontal ~ &` `[data-peer][data-orientation=horizontal] ~ &` `[data-peer][aria-orientation=horizontal] ~ &` `.peer:horizontal ~ &` `.peer[data-orientation=horizontal] ~ &` `.peer[aria-orientation=horizontal] ~ &`	none
`_peerHover`	`[data-peer]:hover ~ &` `[data-peer][data-hover] ~ &` `.peer:hover ~ &` `.peer[data-hover] ~ &`	none
`_peerIdle`	`[data-peer][data-idle] ~ &` `.peer[data-idle] ~ &`	none
`_peerInvalid`	`[data-peer][data-invalid] ~ &` `[data-peer][aria-invalid=true] ~ &` `.peer[data-invalid] ~ &` `.peer[aria-invalid=true] ~ &`	none
`_peerLoaded`	`[data-peer][data-loaded] ~ &` `.peer[data-loaded] ~ &`	none
`_peerLoading`	`[data-peer][data-loading] ~ &` `[data-peer][aria-busy=true] ~ &` `.peer[data-loading] ~ &` `.peer[aria-busy=true] ~ &`	none
`_peerOptional`	`[data-peer]:optional ~ &` `[data-peer][data-optional] ~ &` `.peer:optional ~ &` `.peer[data-optional] ~ &`	none
`_peerPlaceholderShown`	`[data-peer]:placeholder-shown ~ &` `.peer:placeholder-shown ~ &`	none
`_peerPressed`	`[data-peer][data-pressed] ~ &` `[data-peer][aria-pressed=true] ~ &` `.peer[data-pressed] ~ &` `.peer[aria-pressed=true] ~ &`	none
`_peerReadOnly`	`[data-peer][readonly] ~ &` `[data-peer][data-readonly] ~ &` `[data-peer][aria-readonly=true] ~ &` `.peer[readonly] ~ &` `.peer[data-readonly] ~ &` `.peer[aria-readonly=true] ~ &`	none
`_peerReadWrite`	`[data-peer]:read-write ~ &` `[data-peer][data-read-write] ~ &` `.peer:read-write ~ &` `.peer[data-read-write] ~ &`	none
`_peerReject`	`[data-peer][data-reject] ~ &` `.peer[data-reject] ~ &`	none
`_peerRequired`	`[data-peer]:required ~ &` `[data-peer][required] ~ &` `.peer:required ~ &` `.peer[required] ~ &`	none
`_peerSelected`	`[data-peer][data-selected] ~ &` `[data-peer][aria-selected=true] ~ &` `.peer[data-selected] ~ &` `.peer[aria-selected=true] ~ &`	none
`_peerUserInvalid`	`[data-peer]:user-invalid ~ &` `[data-peer][data-user-invalid] ~ &` `.peer:user-invalid ~ &` `.peer[data-user-invalid] ~ &`	none
`_peerValid`	`[data-peer]:valid ~ &` `[data-peer][data-valid] ~ &` `.peer:valid ~ &` `.peer[data-valid] ~ &`	none
`_peerVertical`	`[data-peer]:vertical ~ &` `[data-peer][data-orientation=vertical] ~ &` `[data-peer][aria-orientation=vertical] ~ &` `.peer:vertical ~ &` `.peer[data-orientation=vertical] ~ &` `.peer[aria-orientation=vertical] ~ &`	none
`_picture`	`&:picture-in-picture`	none
`_placeholder`	`&::placeholder` `&[data-placeholder]`	none
`_placeholderShown`	`&:placeholder-shown`	none
`_playing`	`&:playing` `&[data-playing]`	none
`_portrait`	`@media ("orientation": portrait)`	none
`_pressed`	`&[data-pressed]` `&[aria-pressed=true]`	none
`_print`	`@media print`	none
`_readOnly`	`&[readonly]` `&[data-readonly]` `&[aria-readonly=true]`	none
`_readWrite`	`&:read-write` `&[data-read-write]`	none
`_reject`	`&[data-reject]`	none
`_required`	`&:required` `&[required]`	none
`_ripple`	`& .ui-ripple`	none
`_scrollbar`	`&::-webkit-scrollbar` `&[data-scrollbar]`	none
`_scrollbarButton`	`&::-webkit-scrollbar-button`	none
`_scrollbarCorner`	`&::-webkit-scrollbar-corner`	none
`_scrollbarThumb`	`&::-webkit-scrollbar-thumb`	none
`_scrollbarTrack`	`&::-webkit-scrollbar-track`	none
`_scrollbarTrackPiece`	`&::-webkit-scrollbar-track-piece`	none
`_selected`	`&[data-selected]` `&[aria-selected=true]`	none
`_selection`	`&::selection`	none
`_start`	`&[data-start]`	none
`_target`	`&:target` `&[data-target]`	none
`_today`	`&[data-today]`	none
`_userInvalid`	`&:user-invalid` `&[data-user-invalid]`	none
`_valid`	`&:valid` `&[data-valid]`	none
`_vertical`	`&:vertical` `&[data-orientation=vertical]` `&[aria-orientation=vertical]`	none
`_visited`	`&:visited`	none
`_weekend`	`&:where([data-weekend])`	none

At-Rules

Prop	Description
`_container`
`_media`
`_supports`

Other Props

Prop	Description
`apply`
`isTruncated`
`layerStyle`
`lineClamp`
`textStyle`
`vars`

Edit this page on GitHub

PreviousStyled System NextTheming