# Every prop (235) Generated from the prop registry of `@box-kite/react`. The description is the prop's own doc comment and the example is **measured** — the CSS beside a value is what the engine emits for it, not what a doc claims. Alphabetical; the registry's own order is what decides the cascade and is not this. **Values** is what the registry names: a closed list in full, a large family as a count, `a number` where numbers go through a formatter, and `the types allow` where the definition validates a shape rather than a list — the published `.d.ts` is the exact statement, and a value it refuses emits no rule and no class rather than a broken declaration. The numbers are the trap, because the divider is per prop: spacing is ÷4 (`p={4}` is 1rem), `fontSize` is ÷16, `borderRadius` is ÷4, border width and `lineHeight` are direct px, and SVG lengths, filter units and animation times have no divider at all. Read the example rather than assuming. A prop that is not here does not exist: reach for `css={{ … }}` for a one-off, `Box.extend()` for anything used twice, and never for `style={{ }}`. ### `accentColor` The accent-color CSS property tints the parts of a native control the page does not draw: a checkbox's tick, a radio's dot, a range track, a progress bar. The one way to brand them without `appearance="none"` and a rebuild, and it inherits — set it once on a form. - Writes: `accent-color` - Values: 304 named values, anything else the types allow - Example: `accentColor="sky-500"` → `accent-color: var(--sky-500)` ### `ai` The CSS align-items property sets the align-self value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas. - Writes: `align-items` - Values: `stretch` · `flex-start` · `flex-end` · `center` · `baseline` · `start` · `end` · `self-start` · `self-end` · `safe center` · `safe start` · `safe end` · `unsafe center` · `unsafe start` · `unsafe end` - Example: `ai="stretch"` → `align-items: stretch` ### `alignContent` The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis. - Writes: `align-content` - Values: `flex-start` · `flex-end` · `center` · `space-between` · `space-around` · `space-evenly` · `stretch` · `start` · `end` · `baseline` · `normal` · `safe center` · `safe start` · `safe end` · `unsafe center` · `unsafe start` · `unsafe end` - Example: `alignContent="flex-start"` → `align-content: flex-start` ### `alignSelf` The align-self CSS property overrides a grid or flex item's align-items value. In grid, it aligns the item inside the grid area. In flexbox, it aligns the item on the cross axis. - Writes: `align-self` - Values: `auto` · `flex-start` · `flex-end` · `center` · `baseline` · `stretch` · `start` · `end` · `self-start` · `self-end` · `anchor-center` · `safe center` · `safe start` · `safe end` · `unsafe center` · `unsafe start` · `unsafe end` - Example: `alignSelf="auto"` → `align-self: auto` ### `anchorName` Names this element as an anchor, so a floating layer can hang off it by name. The `--` is optional here and added on the way out, the way a `vars` key's is, so `anchorName="trigger"` and `anchorName="--trigger"` write the same declaration. A name is global to the document, so a component rendering many of them needs one per instance. - Writes: `anchor-name` - Values: `none`, anything else the types allow - Example: `anchorName="trigger"` → `anchor-name: --trigger` ### `animation` One of the four presets — their `@keyframes` are registered already and their durations ride `--transitionTime`, so `prefers-reduced-motion` stops them with no opt-in. Declared before the longhands below, so `animationDuration` and friends override what a preset chose. - Writes: `animation` - Values: `spin` · `pulse` · `bounce` · `ping` · `none` - Example: `animation="spin"` → `animation: spin calc(4 * var(--transitionTime)) linear infinite` ### `animationDelay` The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. Milliseconds, like every other time here. - Writes: `animation-delay` - Values: a number - Example: `animationDelay={150}` → `animation-delay: 150ms` ### `animationDirection` The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. - Writes: `animation-direction` - Values: `normal` · `reverse` · `alternate` · `alternate-reverse` - Example: `animationDirection="normal"` → `animation-direction: normal` ### `animationDuration` The animation-duration CSS property sets the length of time that an animation takes to complete one cycle. Milliseconds: `animationDuration={1100}` is `1100ms`, and it names its own time, so reduced motion cannot reach it — say so with `motionReduce`. A spring name is that spring's settling time. - Writes: `animation-duration` - Values: `spring` · `spring-gentle` · `spring-bouncy` · `spring-snappy`, a number - Example: `animationDuration={1100}` → `animation-duration: 1100ms` ### `animationFillMode` The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution. - Writes: `animation-fill-mode` - Values: `none` · `forwards` · `backwards` · `both` - Example: `animationFillMode="none"` → `animation-fill-mode: none` ### `animationIterationCount` The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping. - Writes: `animation-iteration-count` - Values: `infinite`, a number - Example: `animationIterationCount={3}` → `animation-iteration-count: 3` ### `animationName` Which `@keyframes` to run: a sequence registered with `Box.keyframes()`, one of the four preset names, or a name from a stylesheet this library never wrote — an unknown name is left alone rather than dropped, because `@keyframes` can come from anywhere. - Writes: `animation-name` - Values: whatever the types allow - Example: `animationName="spin"` → `animation-name: spin` ### `animationPlayState` The animation-play-state CSS property sets whether an animation is running or paused. - Writes: `animation-play-state` - Values: `running` · `paused` - Example: `animationPlayState="running"` → `animation-play-state: running` ### `animationRange` The shorthand that sets both ends of the range at once: one value sets the start and leaves the end at `normal`, two set both. `entry` is the whole of the element coming into view, `cover 0% cover 50%` the first half of its pass across the scrollport. Only meaningful beside a view timeline. - Writes: `animation-range` - Values: whatever the types allow - Example: `animationRange="entry"` → `animation-range: entry` ### `animationRangeEnd` Where along the timeline the animation finishes: a named part of the pass (`cover`, `contain`, `entry`, `exit`, `entry-crossing`, `exit-crossing`), an offset into one, or a plain length. - Writes: `animation-range-end` - Values: whatever the types allow - Example: `animationRangeEnd="exit"` → `animation-range-end: exit` ### `animationRangeStart` Where along the timeline the animation starts. Same values as the end, and the pair is what turns "when this element is scrolled past" into "while it is entering, and no longer". - Writes: `animation-range-start` - Values: whatever the types allow - Example: `animationRangeStart="entry 25%"` → `animation-range-start: entry 25%` ### `animationTimeline` What drives the animation — a scroll position rather than a clock, so there is no rAF loop, no scroll listener and no state. `scroll()` is the nearest scrollport's progress (`scroll(root)` the page's), `view()` this element's progress through it; both need nothing declared anywhere else. A name is a timeline `scrollTimeline`/`viewTimeline` declared elsewhere. Two things to know. **It is declared after `animation`**, because the CSS shorthand resets this property to `auto` — the registry's order is what stops `animation="spin"` quietly undoing it. And a scroll-driven animation has **no duration**, so `--transitionTime` cannot reach it and reduced motion needs saying out loud: `motionReduce={{ animation: 'none' }}`. - Writes: `animation-timeline` - Values: `none` · `auto`, anything else the types allow - Example: `animationTimeline="scroll()"` → `animation-timeline: scroll()` ### `animationTimingFunction` How an animation progresses through each cycle: a keyword, one of the four sampled springs, or a curve of your own — `cubic-bezier()`, `steps()` and `linear()` are values. A spring names its duration too. - Writes: `animation-timing-function` - Values: `linear` · `ease` · `ease-in` · `ease-in-out` · `ease-out` · `step-start` · `step-end` · `spring` · `spring-gentle` · `spring-bouncy` · `spring-snappy`, anything else the types allow - Example: `animationTimingFunction="linear"` → `animation-timing-function: linear` ### `appearance` The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. - Writes: `appearance` - Values: `none` · `auto` · `menulist-button` · `textfield` · `button` · `checkbox` - Example: `appearance="none"` → `appearance: none` ### `aspectRatio` The aspect-ratio CSS property sets a preferred ratio for the box, which the sizing props then fill in one axis of: `aspectRatio="video" width="fit"` is a 16/9 embed. Two names (`square`, `video`), a ratio written compactly (`'4/3'`), or a number — the only prop taking both a fraction string and a division. - Writes: `aspect-ratio` - Values: `auto` · `square` · `video`, a number, anything else the types allow - Example: `aspectRatio="video"` → `aspect-ratio: 16 / 9` ### `b` The border-width shorthand CSS property sets the width of an element's border. - Writes: `border-width` - Values: a number - Example: `b={4}` → `border-width: 4px` ### `backdropBlur` How far what is *behind* the element is blurred — the glassmorphism half. Needs something translucent in front of it. - Writes: `--boxBackdropBlur`, `backdrop-filter` - Values: `xs` · `sm` · `md` · `lg` · `xl` · `xxl` · `xxxl` · `none`, a number - Example: `backdropBlur="sm"` → `--boxBackdropBlur: blur(8px); backdrop-filter: var(--boxBackdropBlur,) var(--boxBackdropBrightness,) var(--boxBackdropContrast,) var(--boxBackdropGrayscale,) var(--boxBackdropHueRotate,) var(--boxBackdropInvert,) var(--boxBackdropOpacity,) var(--boxBackdropSaturate,) var(--boxBackdropSepia,)` ### `backdropBrightness` How bright what is behind the element is rendered, as a percentage. - Writes: `--boxBackdropBrightness`, `backdrop-filter` - Values: `none`, a number - Example: `backdropBrightness={110}` → `--boxBackdropBrightness: brightness(110%); backdrop-filter: var(--boxBackdropBlur,) var(--boxBackdropBrightness,) var(--boxBackdropContrast,) var(--boxBackdropGrayscale,) var(--boxBackdropHueRotate,) var(--boxBackdropInvert,) var(--boxBackdropOpacity,) var(--boxBackdropSaturate,) var(--boxBackdropSepia,)` ### `backdropContrast` How much contrast what is behind the element is rendered with, as a percentage. - Writes: `--boxBackdropContrast`, `backdrop-filter` - Values: `none`, a number - Example: `backdropContrast={125}` → `--boxBackdropContrast: contrast(125%); backdrop-filter: var(--boxBackdropBlur,) var(--boxBackdropBrightness,) var(--boxBackdropContrast,) var(--boxBackdropGrayscale,) var(--boxBackdropHueRotate,) var(--boxBackdropInvert,) var(--boxBackdropOpacity,) var(--boxBackdropSaturate,) var(--boxBackdropSepia,)` ### `backdropFilter` The whole `backdrop-filter` at once, written as CSS. Superseded by the nine `backdrop*` props, which compose — this one writes the same property, so it and they are the same declaration: use one. - Writes: `backdrop-filter` - Values: `none` · `blur(12px)` · `blur(8px)` · `blur(4px)` - Example: `backdropFilter="none"` → `backdrop-filter: none` ### `backdropGrayscale` How far what is behind the element is desaturated, as a percentage. - Writes: `--boxBackdropGrayscale`, `backdrop-filter` - Values: `none`, a number - Example: `backdropGrayscale={100}` → `--boxBackdropGrayscale: grayscale(100%); backdrop-filter: var(--boxBackdropBlur,) var(--boxBackdropBrightness,) var(--boxBackdropContrast,) var(--boxBackdropGrayscale,) var(--boxBackdropHueRotate,) var(--boxBackdropInvert,) var(--boxBackdropOpacity,) var(--boxBackdropSaturate,) var(--boxBackdropSepia,)` ### `backdropHueRotate` How far every hue behind the element is rotated round the colour circle, in degrees. - Writes: `--boxBackdropHueRotate`, `backdrop-filter` - Values: `none`, a number - Example: `backdropHueRotate={90}` → `--boxBackdropHueRotate: hue-rotate(90deg); backdrop-filter: var(--boxBackdropBlur,) var(--boxBackdropBrightness,) var(--boxBackdropContrast,) var(--boxBackdropGrayscale,) var(--boxBackdropHueRotate,) var(--boxBackdropInvert,) var(--boxBackdropOpacity,) var(--boxBackdropSaturate,) var(--boxBackdropSepia,)` ### `backdropInvert` How far the colours behind the element are inverted, as a percentage. - Writes: `--boxBackdropInvert`, `backdrop-filter` - Values: `none`, a number - Example: `backdropInvert={100}` → `--boxBackdropInvert: invert(100%); backdrop-filter: var(--boxBackdropBlur,) var(--boxBackdropBrightness,) var(--boxBackdropContrast,) var(--boxBackdropGrayscale,) var(--boxBackdropHueRotate,) var(--boxBackdropInvert,) var(--boxBackdropOpacity,) var(--boxBackdropSaturate,) var(--boxBackdropSepia,)` ### `backdropOpacity` How opaque what is behind the element is rendered, as a percentage. `filter` has no use for this one, so there is no `opacity` twin. - Writes: `--boxBackdropOpacity`, `backdrop-filter` - Values: `none`, a number - Example: `backdropOpacity={80}` → `--boxBackdropOpacity: opacity(80%); backdrop-filter: var(--boxBackdropBlur,) var(--boxBackdropBrightness,) var(--boxBackdropContrast,) var(--boxBackdropGrayscale,) var(--boxBackdropHueRotate,) var(--boxBackdropInvert,) var(--boxBackdropOpacity,) var(--boxBackdropSaturate,) var(--boxBackdropSepia,)` ### `backdropSaturate` How saturated what is behind the element is rendered, as a percentage. - Writes: `--boxBackdropSaturate`, `backdrop-filter` - Values: `none`, a number - Example: `backdropSaturate={180}` → `--boxBackdropSaturate: saturate(180%); backdrop-filter: var(--boxBackdropBlur,) var(--boxBackdropBrightness,) var(--boxBackdropContrast,) var(--boxBackdropGrayscale,) var(--boxBackdropHueRotate,) var(--boxBackdropInvert,) var(--boxBackdropOpacity,) var(--boxBackdropSaturate,) var(--boxBackdropSepia,)` ### `backdropSepia` How far what is behind the element is pushed towards sepia, as a percentage. - Writes: `--boxBackdropSepia`, `backdrop-filter` - Values: `none`, a number - Example: `backdropSepia={100}` → `--boxBackdropSepia: sepia(100%); backdrop-filter: var(--boxBackdropBlur,) var(--boxBackdropBrightness,) var(--boxBackdropContrast,) var(--boxBackdropGrayscale,) var(--boxBackdropHueRotate,) var(--boxBackdropInvert,) var(--boxBackdropOpacity,) var(--boxBackdropSaturate,) var(--boxBackdropSepia,)` ### `bb` The border-bottom-width CSS property sets the width of the bottom border of an element. - Writes: `border-bottom-width` - Values: a number - Example: `bb={4}` → `border-bottom-width: 4px` ### `be` The border-inline-end-width CSS property sets the width of the border on the side the text ends at: `br` in a left-to-right writing mode, `bl` in a right-to-left one. - Writes: `border-inline-end-width` - Values: a number - Example: `be={4}` → `border-inline-end-width: 4px` ### `bgClip` Which box the background is painted inside — and `text`, which clips it to the glyphs themselves. That is how a gradient becomes lettering, and it needs `color="transparent"` beside it or the text paints over its own background. - Writes: `background-clip` - Values: `border` · `padding` · `content` · `text` - Example: `bgClip="text"` → `background-clip: text` ### `bgColor` The background-color CSS property sets the background color of an element. - Writes: `background-color` - Values: 304 named values, anything else the types allow - Example: `bgColor="sky-500"` → `background-color: var(--sky-500)` ### `bgGradient` A gradient written as a value: the key names the kind and carries its geometry (`linear` a direction or an angle, `radial` a shape, `conic` an angle to start from), `colors` are the stops in order — a palette token, one with an opacity modifier, or a `[colour, position]` pair. `interpolate="oklch"` is what keeps a two-stop gradient out of the grey middle sRGB runs it through. Writes `background-image`, so it and `bgImage` are the same property: use one. - Writes: `background-image` - Values: whatever the types allow - Example: `bgGradient={{ linear: 'r', colors: ['blue-500', 'pink-500'] }}` → `background-image: linear-gradient(to right,var(--blue-500),var(--pink-500))` ### `bgImage` The background-image CSS property sets one or more background images on an element. - Writes: `background-image` - Values: `gradient-primary` · `gradient-aurora-light` · `gradient-aurora-dark` · `gradient-accent` · `bg-img-checked` · `bg-img-indeterminate` · `bg-img-radio` · `none` - Example: `bgImage="gradient-primary"` → `background-image: var(--gradient-primary)` ### `bl` The border-left-width CSS property sets the width of the left border of an element. - Writes: `border-left-width` - Values: a number - Example: `bl={4}` → `border-left-width: 4px` ### `blur` How far the element's own pixels are blurred: a step of the named scale (`xs` 4px through `xxxl` 64px) or a radius in px. One of nine functions that compose into a single `filter`, so a blur and a `brightness` coexist; `none` clears this one and leaves the rest. - Writes: `--boxBlur`, `filter` - Values: `xs` · `sm` · `md` · `lg` · `xl` · `xxl` · `xxxl` · `none`, a number - Example: `blur={3}` → `--boxBlur: blur(3px); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)` ### `borderCollapse` Whether a table's cell borders are shared or every cell keeps its own. `collapse` is what makes a bordered table read as one grid rather than as a row of boxes, and it is the value `borderSpacing` has nothing to space. - Writes: `border-collapse` - Values: `collapse` · `separate` - Example: `borderCollapse="collapse"` → `border-collapse: collapse` ### `borderColor` The border-color shorthand CSS property sets the color of an element's border. - Writes: `border-color` - Values: 304 named values, anything else the types allow - Example: `borderColor="sky-500"` → `border-color: var(--sky-500)` ### `borderRadius` The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. - Writes: `border-radius` - Values: a number - Example: `borderRadius={4}` → `border-radius: 1rem` ### `borderRadiusBottom` The border-bottom-radius CSS property rounds the bottom corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. - Writes: `border-bottom-left-radius`, `border-bottom-right-radius` - Values: a number - Example: `borderRadiusBottom={4}` → `border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem` ### `borderRadiusBottomLeft` The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. - Writes: `border-bottom-left-radius` - Values: a number - Example: `borderRadiusBottomLeft={4}` → `border-bottom-left-radius: 1rem` ### `borderRadiusBottomRight` The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. - Writes: `border-bottom-right-radius` - Values: a number - Example: `borderRadiusBottomRight={4}` → `border-bottom-right-radius: 1rem` ### `borderRadiusEnd` Rounds both corners on the side the text ends at: the right ones in a left-to-right writing mode, the left ones in a right-to-left one. - Writes: `border-start-end-radius`, `border-end-end-radius` - Values: a number - Example: `borderRadiusEnd={4}` → `border-start-end-radius: 1rem; border-end-end-radius: 1rem` ### `borderRadiusEndEnd` Rounds the block-end, inline-end corner: bottom-right in a left-to-right writing mode, bottom-left in a right-to-left one. - Writes: `border-end-end-radius` - Values: a number - Example: `borderRadiusEndEnd={4}` → `border-end-end-radius: 1rem` ### `borderRadiusEndStart` Rounds the block-end, inline-start corner: bottom-left in a left-to-right writing mode, bottom-right in a right-to-left one. - Writes: `border-end-start-radius` - Values: a number - Example: `borderRadiusEndStart={4}` → `border-end-start-radius: 1rem` ### `borderRadiusLeft` The border-left-radius CSS property rounds the left corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. - Writes: `border-top-left-radius`, `border-bottom-left-radius` - Values: a number - Example: `borderRadiusLeft={4}` → `border-top-left-radius: 1rem; border-bottom-left-radius: 1rem` ### `borderRadiusRight` The border-right-radius CSS property rounds the right corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. - Writes: `border-top-right-radius`, `border-bottom-right-radius` - Values: a number - Example: `borderRadiusRight={4}` → `border-top-right-radius: 1rem; border-bottom-right-radius: 1rem` ### `borderRadiusStart` Rounds both corners on the side the text starts from: the left ones in a left-to-right writing mode, the right ones in a right-to-left one. - Writes: `border-start-start-radius`, `border-end-start-radius` - Values: a number - Example: `borderRadiusStart={4}` → `border-start-start-radius: 1rem; border-end-start-radius: 1rem` ### `borderRadiusStartEnd` Rounds the block-start, inline-end corner: top-right in a left-to-right writing mode, top-left in a right-to-left one. - Writes: `border-start-end-radius` - Values: a number - Example: `borderRadiusStartEnd={4}` → `border-start-end-radius: 1rem` ### `borderRadiusStartStart` Rounds the block-start, inline-start corner: top-left in a left-to-right writing mode, top-right in a right-to-left one. - Writes: `border-start-start-radius` - Values: a number - Example: `borderRadiusStartStart={4}` → `border-start-start-radius: 1rem` ### `borderRadiusTop` The border-top-radius CSS property rounds the top corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. - Writes: `border-top-left-radius`, `border-top-right-radius` - Values: a number - Example: `borderRadiusTop={4}` → `border-top-left-radius: 1rem; border-top-right-radius: 1rem` ### `borderRadiusTopLeft` The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. - Writes: `border-top-left-radius` - Values: a number - Example: `borderRadiusTopLeft={4}` → `border-top-left-radius: 1rem` ### `borderRadiusTopRight` The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. - Writes: `border-top-right-radius` - Values: a number - Example: `borderRadiusTopRight={4}` → `border-top-right-radius: 1rem` ### `borderSpacing` The gap between the cells of a `separate` table, on the spacing scale. It is a property of the table, not of a cell: a cell's own `p` is inside its border, this is the space outside it. - Writes: `border-spacing` - Values: a number - Example: `borderSpacing={2}` → `border-spacing: 0.5rem` ### `borderStyle` The border-style shorthand CSS property sets the line style for all four sides of an element's border. - Writes: `border-style` - Values: `solid` · `dashed` · `dotted` · `double` · `groove` · `ridge` · `inset` · `outset` · `none` · `hidden` - Example: `borderStyle="solid"` → `border-style: solid` ### `bottom` The bottom CSS property participates in setting the vertical position of a positioned element. This inset property has no effect on non-positioned elements. It also takes `anchor()`, an inset measured to one of the anchor's own edges. - Writes: `bottom` - Values: 55 named values, a number, anything else the types allow - Example: `bottom={4}` → `bottom: 1rem` ### `boxSizing` The `box-sizing` CSS property sets how the total width and height of an element is calculated. - Writes: `box-sizing` - Values: `border-box` · `content-box` - Example: `boxSizing="border-box"` → `box-sizing: border-box` ### `br` The border-right-width CSS property sets the width of the right border of an element. - Writes: `border-right-width` - Values: a number - Example: `br={4}` → `border-right-width: 4px` ### `brightness` How bright the element is rendered, as a percentage: `brightness={110}` is 10% brighter, `{50}` is half. - Writes: `--boxBrightness`, `filter` - Values: `none`, a number - Example: `brightness={110}` → `--boxBrightness: brightness(110%); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)` ### `bs` The border-inline-start-width CSS property sets the width of the border on the side the text starts from: `bl` in a left-to-right writing mode, `br` in a right-to-left one. - Writes: `border-inline-start-width` - Values: a number - Example: `bs={4}` → `border-inline-start-width: 4px` ### `bt` The border-top-width CSS property sets the width of the top border of an element. - Writes: `border-top-width` - Values: a number - Example: `bt={4}` → `border-top-width: 4px` ### `bx` The border-width shorthand CSS property sets the width of an element's left and right border. - Writes: `border-inline-width` - Values: a number - Example: `bx={4}` → `border-inline-width: 4px` ### `by` The border-width shorthand CSS property sets the width of an element's top and bottom border. - Writes: `border-block-width` - Values: a number - Example: `by={4}` → `border-block-width: 4px` ### `caretColor` The caret-color CSS property sets the colour of the insertion caret in a text field or any editable element. - Writes: `caret-color` - Values: 304 named values, anything else the types allow - Example: `caretColor="sky-500"` → `caret-color: var(--sky-500)` ### `clipPath` The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. `inset(50%)` clips an element away entirely without removing it from the accessibility tree — the visually-hidden recipe. A `` in the document is `clipPath="url(#frame)"`. - Writes: `clip-path` - Values: `inset(50%)` · `none`, anything else the types allow - Example: `clipPath="inset(50%)"` → `clip-path: inset(50%)` ### `color` The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value. - Writes: `color` - Values: 304 named values, anything else the types allow - Example: `color="sky-500"` → `color: var(--sky-500)` ### `colorScheme` The color-scheme CSS property tells the browser which schemes the element is *built* for, and native UI follows it: scrollbars, form controls, the spellcheck underline, `Canvas`/`CanvasText`. A dark theme that leaves this alone gets light scrollbars over its dark page — `Box.Theme` sets it on the root. - Writes: `color-scheme` - Values: `normal` · `light` · `dark` · `light dark` · `only light` · `only dark` - Example: `colorScheme="normal"` → `color-scheme: normal` ### `columnGap` The column-gap CSS property sets the size of the gap (gutter) between an element's columns. - Writes: `column-gap` - Values: a number, anything else the types allow - Example: `columnGap={4}` → `column-gap: 1rem` ### `container` Makes this element a query container, so the `cq` styles inside it answer to *its* width: `container` alone is an anonymous one (the nearest container `cq={{ md: … }}` finds), a name is what `cq={{ 'sidebar/md': … }}` addresses. Both mean `container-type: inline-size` — the only type that does not need the element to have a size of its own. The three props are declared shorthand-first, so `containerType` beside `container` overrides the type and keeps the name. - Writes: `container-type` - Values: `true`, anything else the types allow - Example: `container` → `container-type: inline-size` ### `containerName` The name `cq={{ 'sidebar/md': … }}` addresses. Only a query container answers, so pair it with `containerType`. - Writes: `container-name` - Values: whatever the types allow - Example: `containerName="sidebar"` → `container-name: sidebar` ### `containerType` What may be asked about this container: `inline-size` (its width, what `container` sets), `size` (both axes — which needs the element to have a block size of its own, or its content stops laying it out), or `normal` to stop being a query container at all. - Writes: `container-type` - Values: `inline-size` · `size` · `normal` - Example: `containerType="inline-size"` → `container-type: inline-size` ### `content` What a `::before`/`::after` renders — and whether it renders at all: a generated element with no `content` produces no box. `content="empty"` is `''` (the value a decoration wants), a quoted string or a function (`attr()`, `counter()`, `url()`) is written out as CSS, and **anything else is text and gets quoted for you** — `content="New"` is `content: "New"`. - Writes: `content` - Values: `empty` · `none` · `normal` · `open-quote` · `close-quote` · `no-open-quote` · `no-close-quote`, anything else the types allow - Example: `content="New"` → `content: "New"` ### `contentVisibility` The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster. - Writes: `content-visibility` - Values: `visible` · `hidden` - Example: `contentVisibility="visible"` → `content-visibility: visible` ### `contrast` How much contrast the element is rendered with, as a percentage — `100` being the element as it is. - Writes: `--boxContrast`, `filter` - Values: `none`, a number - Example: `contrast={125}` → `--boxContrast: contrast(125%); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)` ### `css` The escape hatch: a style object for the properties this library has no prop for, compiled into a class through the same pipeline as every other prop — shared, nestable, server-rendered — rather than an inline style. Declared last on purpose: its rule sorts after every typed prop's, so on one element it wins the property both name. A colour token resolves the way a `vars` value does; a number is written as it stands. - Writes: `mix-blend-mode` - Values: whatever the types allow - Example: `css={{ mixBlendMode: 'multiply' }}` → `mix-blend-mode: multiply` ### `cursor` The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element. - Writes: `cursor` - Values: `auto` · `default` · `none` · `context-menu` · `help` · `pointer` · `progress` · `wait` · `cell` · `crosshair` · `text` · `vertical-text` · `alias` · `copy` · `move` · `no-drop` · `not-allowed` · `e-resize` · `n-resize` · `ne-resize` · `nw-resize` · `s-resize` · `se-resize` · `sw-resize` · `w-resize` · `ew-resize` · `ns-resize` · `nesw-resize` · `nwse-resize` · `col-resize` · `row-resize` · `all-scroll` · `zoom-in` · `zoom-out` · `grab` · `grabbing` - Example: `cursor="pointer"` → `cursor: pointer` ### `cx` The centre of a `` or ``, horizontally, in user units. Real CSS, so unlike the attribute it transitions — moving a point on hover is one prop and no JavaScript. - Writes: `cx` - Values: a number, anything else the types allow - Example: `cx={4}` → `cx: 4` ### `cy` The cy CSS property positions the centre of a `` or an `` vertically, in user units. Transitions like `cx`. - Writes: `cy` - Values: a number, anything else the types allow - Example: `cy={4}` → `cy: 4` ### `d` The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). - Writes: `flex-direction` - Values: `row` · `row-reverse` · `column` · `column-reverse` - Example: `d="row"` → `flex-direction: row` ### `display` The `display` CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. - Writes: `display` - Values: `none` · `block` · `inline` · `inline-block` · `flex` · `inline-flex` · `grid` · `inline-grid` · `contents` · `list-item` · `table` · `table-header-group` · `table-row-group` · `table-row` · `table-cell` - Example: `display="none"` → `display: none` ### `dominantBaseline` Which baseline of SVG text sits on its `y`: `central` centres a number inside a gauge. Not inherited, so like `vectorEffect` its rule names the element *and* its descendants. - Writes: `dominant-baseline` - Values: `auto` · `text-bottom` · `alphabetic` · `ideographic` · `middle` · `central` · `mathematical` · `hanging` · `text-top` - Example: `dominantBaseline="auto"` → `dominant-baseline: auto` ### `dropShadow` A shadow cast by the element's *shape* rather than its box — the one that follows a transparent PNG's outline or an SVG's path, where `shadow` would draw a rectangle. `xs` through `xxl`, recoloured by `dropShadowColor`. It is a filter function, so it composes with `blur` and the rest rather than with the shadow stack. - Writes: `--boxDropShadow`, `filter` - Values: `xs` · `sm` · `md` · `lg` · `xl` · `xxl` · `none` - Example: `dropShadow="xs"` → `--boxDropShadow: drop-shadow(0 1px 1px var(--boxDropShadowColor, rgb(0 0 0 / .05))); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)` ### `dropShadowColor` What colour `dropShadow` draws in. Shows nothing on its own. - Writes: `--boxDropShadowColor` - Values: 304 named values, anything else the types allow - Example: `dropShadowColor="sky-500"` → `--boxDropShadowColor: var(--sky-500)` ### `fieldSizing` The field-sizing CSS property lets a form control size itself to its content: `fieldSizing="content"` is a textarea that grows as it is typed into, with no JavaScript measuring anything. - Writes: `field-sizing` - Values: `content` · `fixed` - Example: `fieldSizing="content"` → `field-sizing: content` ### `fill` The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's fill attribute. Takes a colour token, a paint server the document defines (`fill="url(#sky)"` — a `` or a pattern) or a variable somebody else declared (`fill="var(--chart-1)"`). - Writes: `fill` - Values: 304 named values, anything else the types allow - Example: `fill="sky-500"` → `fill: var(--sky-500)` ### `fillOpacity` The fill-opacity CSS property defines the opacity of the paint applied to the interior of an SVG shape or to SVG text. - Writes: `fill-opacity` - Values: `0` · `0.1` · `0.2` · `0.3` · `0.4` · `0.5` · `0.6` · `0.7` · `0.8` · `0.9` · `1` - Example: `fillOpacity={0.5}` → `fill-opacity: 0.5` ### `fillRule` The fill-rule CSS property defines which parts of a self-intersecting SVG shape count as inside it, and are therefore filled. - Writes: `fill-rule` - Values: `nonzero` · `evenodd` - Example: `fillRule="nonzero"` → `fill-rule: nonzero` ### `flex1` The flex CSS shorthand property sets flex to fit the space available in its flex container. - Writes: `flex` - Values: `true` - Example: `flex1` → `flex: 1` ### `flexGrow` The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container's positive free space, if any, should be assigned to the flex item's main size. - Writes: `flex-grow` - Values: a number - Example: `flexGrow={4}` → `flex-grow: 4` ### `flexShrink` The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line's negative free space is distributed between the line's flex items that have a flex-shrink value greater than 0. - Writes: `flex-shrink` - Values: a number - Example: `flexShrink={4}` → `flex-shrink: 4` ### `flexWrap` The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. - Writes: `flex-wrap` - Values: `nowrap` · `wrap` · `wrap-reverse` - Example: `flexWrap="nowrap"` → `flex-wrap: nowrap` ### `flip` Mirrors the element: `xAxis` flips it left to right, `yAxis` top to bottom. It writes the `scale` property, which is what `scale` writes too — use one of them. `rtl={{ flip: 'xAxis' }}` is the arrow that has to point the other way in a right-to-left reading. - Writes: `scale` - Values: `xAxis` · `yAxis` - Example: `flip="xAxis"` → `scale: -1 1` ### `fontSize` The font-size CSS property sets the size of the font. Its divider is **16**, not the spacing scale’s 4, so the number is the pixel size a reader was reaching for: `fontSize={14}` is `0.875rem`. Font-size-relative units (`em`, `ex`) resolve against it. - Writes: `font-size` - Values: `inherit`, a number - Example: `fontSize={14}` → `font-size: 0.875rem` ### `fontStyle` The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family. - Writes: `font-style` - Values: `italic` · `normal` · `oblique` - Example: `fontStyle="italic"` → `font-style: italic` ### `fontWeight` The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set. - Writes: `font-weight` - Values: `100` · `200` · `300` · `400` · `500` · `600` · `700` · `800` · `900` - Example: `fontWeight={700}` → `font-weight: 700` ### `gap` The gap CSS shorthand property sets the gaps (also called gutters) between rows and columns. This property applies to multi-column, flex, and grid containers. - Writes: `gap` - Values: a number, anything else the types allow - Example: `gap={4}` → `gap: 1rem` ### `grayscale` How far the element is desaturated, as a percentage: `grayscale={100}` removes colour entirely. - Writes: `--boxGrayscale`, `filter` - Values: `none`, a number - Example: `grayscale={100}` → `--boxGrayscale: grayscale(100%); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)` ### `gridColumn` The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. - Writes: `grid-column` - Values: `full-row`, a number - Example: `gridColumn={4}` → `grid-column: span 4/span 4` ### `gridColumnEnd` The grid-column-end CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. - Writes: `grid-column-end` - Values: a number - Example: `gridColumnEnd={4}` → `grid-column-end: 4` ### `gridColumnStart` The grid-column-start CSS property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. - Writes: `grid-column-start` - Values: a number - Example: `gridColumnStart={4}` → `grid-column-start: 4` ### `gridRow` The grid-row CSS shorthand property specifies a grid item's size and location within a grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. - Writes: `grid-row` - Values: `full-column`, a number - Example: `gridRow={4}` → `grid-row: span 4/span 4` ### `gridRowEnd` The grid-row-end CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. - Writes: `grid-row-end` - Values: a number - Example: `gridRowEnd={4}` → `grid-row-end: 4` ### `gridRowStart` The grid-row-start CSS property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. - Writes: `grid-row-start` - Values: a number - Example: `gridRowStart={4}` → `grid-row-start: 4` ### `gridTemplateColumns` The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns. - Writes: `grid-template-columns` - Values: `subgrid`, a number - Example: `gridTemplateColumns={4}` → `grid-template-columns: repeat(4,minmax(0,1fr))` ### `gridTemplateRows` The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows. - Writes: `grid-template-rows` - Values: `subgrid`, a number - Example: `gridTemplateRows={4}` → `grid-template-rows: repeat(4,minmax(0,1fr))` ### `height` The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area. It also takes `anchor-size()`, a length read off the anchor a floating layer is placed against. - Writes: `height` - Values: `fit` · `fit-screen` · `1/1` · `1/2` · `1/3` · `2/3` · `1/4` · `2/4` · `3/4` · `1/5` · `2/5` · `3/5` · `4/5` · `1/6` · `2/6` · `3/6` · `4/6` · `5/6` · `1/12` · `2/12` · `3/12` · `4/12` · `5/12` · `6/12` · `7/12` · `8/12` · `9/12` · `10/12` · `11/12` · `auto` · `fit-content` · `max-content` · `min-content`, a number, anything else the types allow - Example: `height={4}` → `height: 1rem` ### `hueRotate` How far every hue in the element is rotated round the colour circle, in degrees. - Writes: `--boxHueRotate`, `filter` - Values: `none`, a number - Example: `hueRotate={90}` → `--boxHueRotate: hue-rotate(90deg); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)` ### `inline` The `inline` property is a shortcut to transform `block`, `flex` and `grid` value to `inline-block`, `inline-flex` and `inline-grid` respectively. - Writes: `display` - Values: `true` - Example: `inline` → `display: inline-block` ### `inset` The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand. - Writes: `inset` - Values: 55 named values, a number, anything else the types allow - Example: `inset={4}` → `inset: 1rem` ### `insetEnd` The inset-inline-end CSS property sets the distance from the edge the text ends at: `right` in a left-to-right writing mode, `left` in a right-to-left one. It also takes `anchor()`, an inset measured to one of the anchor's own edges. - Writes: `inset-inline-end` - Values: 55 named values, a number, anything else the types allow - Example: `insetEnd={4}` → `inset-inline-end: 1rem` ### `insetRing` The same ring, drawn inside the border box: an inner hairline that needs no second element. - Writes: `--boxInsetRing`, `box-shadow` - Values: a number - Example: `insetRing={4}` → `--boxInsetRing: inset 0 0 0 4px var(--boxInsetRingColor, currentColor); box-shadow: var(--boxInsetShadow, 0 0 #0000),var(--boxInsetRing, 0 0 #0000),var(--boxRing, 0 0 #0000),var(--boxShadow, 0 0 #0000)` ### `insetRingColor` What colour `insetRing` draws in. `currentColor` otherwise. - Writes: `--boxInsetRingColor` - Values: 304 named values, anything else the types allow - Example: `insetRingColor="sky-500"` → `--boxInsetRingColor: var(--sky-500)` ### `insetShadow` A shadow drawn inside the border box: `xxs`, `xs` or `sm`. Its own layer, so it composes with `shadow`. - Writes: `--boxInsetShadow`, `box-shadow` - Values: `xxs` · `xs` · `sm` · `none` - Example: `insetShadow="xxs"` → `--boxInsetShadow: inset 0 1px var(--boxInsetShadowColor, rgb(0 0 0 / .05)); box-shadow: var(--boxInsetShadow, 0 0 #0000),var(--boxInsetRing, 0 0 #0000),var(--boxRing, 0 0 #0000),var(--boxShadow, 0 0 #0000)` ### `insetShadowColor` What colour `insetShadow` draws in. Shows nothing on its own. - Writes: `--boxInsetShadowColor` - Values: 304 named values, anything else the types allow - Example: `insetShadowColor="sky-500"` → `--boxInsetShadowColor: var(--sky-500)` ### `insetStart` The inset-inline-start CSS property sets the distance from the edge the text starts at: `left` in a left-to-right writing mode, `right` in a right-to-left one. It also takes `anchor()`, an inset measured to one of the anchor's own edges. - Writes: `inset-inline-start` - Values: 55 named values, a number, anything else the types allow - Example: `insetStart={4}` → `inset-inline-start: 1rem` ### `insetX` The inset-inline CSS shorthand sets both insets on the inline axis: `insetX` is `left` and `right` in a left-to-right writing mode, the way `mx` is `margin-inline`. - Writes: `inset-inline` - Values: 55 named values, a number, anything else the types allow - Example: `insetX={4}` → `inset-inline: 1rem` ### `insetY` The inset-block CSS shorthand sets both insets on the block axis — `top` and `bottom` in a horizontal writing mode. - Writes: `inset-block` - Values: 55 named values, a number, anything else the types allow - Example: `insetY={4}` → `inset-block: 1rem` ### `interpolateSize` Whether `height`/`width` may interpolate to and from a keyword — `auto`, `min-content`, `fit-content`. Inherited, so it belongs on the container and every size inside it animates; Chromium-only for now, and elsewhere a `height: auto` transition simply snaps, which is what it already does today. - Writes: `interpolate-size` - Values: `numeric-only` · `allow-keywords` - Example: `interpolateSize="numeric-only"` → `interpolate-size: numeric-only` ### `invert` How far the element's colours are inverted, as a percentage: `invert={100}` is a photographic negative. - Writes: `--boxInvert`, `filter` - Values: `none`, a number - Example: `invert={100}` → `--boxInvert: invert(100%); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)` ### `jc` The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers. - Writes: `justify-content` - Values: `start` · `end` · `flex-start` · `flex-end` · `center` · `left` · `right` · `space-between` · `space-around` · `space-evenly` · `stretch` · `safe center` · `safe start` · `safe end` · `unsafe center` · `unsafe start` · `unsafe end` - Example: `jc="start"` → `justify-content: start` ### `justifyItems` The CSS justify-items property sets the `justify-self` of every item in the box: in a grid, where each one sits on the inline axis of its own area. - Writes: `justify-items` - Values: `normal` · `start` · `end` · `center` · `stretch` · `baseline` · `left` · `right` · `self-start` · `self-end` · `safe center` · `safe start` · `safe end` · `unsafe center` · `unsafe start` · `unsafe end` - Example: `justifyItems="normal"` → `justify-items: normal` ### `justifySelf` The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis. - Writes: `justify-self` - Values: `auto` · `flex-start` · `flex-end` · `center` · `baseline` · `stretch` · `start` · `end` · `left` · `right` · `self-start` · `self-end` · `anchor-center` · `safe center` · `safe start` · `safe end` · `unsafe center` · `unsafe start` · `unsafe end` - Example: `justifySelf="auto"` → `justify-self: auto` ### `left` The left CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements. It also takes `anchor()`, an inset measured to one of the anchor's own edges. - Writes: `left` - Values: 55 named values, a number, anything else the types allow - Example: `left={4}` → `left: 1rem` ### `letterSpacing` The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. - Writes: `letter-spacing` - Values: a number - Example: `letterSpacing={4}` → `letter-spacing: 4px` ### `lineHeight` The line-height CSS property sets the height of a line box. Direct **pixels** here — `lineHeight={24}` is `24px`, not the unitless multiple of the font size CSS takes as well; `"font-size"` is that multiple, at 1. - Writes: `line-height` - Values: `font-size`, a number - Example: `lineHeight={24}` → `line-height: 24px` ### `listStyle` The list-style CSS shorthand property allows you to set all the list style properties at once. - Writes: `list-style` - Values: `disc` · `circle` · `square` · `decimal` · `inside` · `outside` · `none` - Example: `listStyle="disc"` → `list-style: disc` ### `m` The margin CSS shorthand property sets the margin area on all four sides of an element. - Writes: `margin` - Values: 55 named values, a number, anything else the types allow - Example: `m={4}` → `margin: 1rem` ### `maskImage` What the element is masked by: the alpha channel of an image decides which of its pixels are painted. Takes the same gradient record `bgGradient` does — so a fade to `transparent` is the whole edge-fade recipe — or a `url(#id)`/`var(--name)` somebody else defined. One mask, not a stack. - Writes: `mask-image` - Values: `none`, anything else the types allow - Example: `maskImage={{ linear: 'b', colors: ['black', 'transparent'] }}` → `mask-image: linear-gradient(to bottom,var(--black),var(--transparent))` ### `maxHeight` The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height. It also takes `anchor-size()`, a length read off the anchor a floating layer is placed against. - Writes: `max-height` - Values: `fit` · `fit-screen` · `1/1` · `1/2` · `1/3` · `2/3` · `1/4` · `2/4` · `3/4` · `1/5` · `2/5` · `3/5` · `4/5` · `1/6` · `2/6` · `3/6` · `4/6` · `5/6` · `1/12` · `2/12` · `3/12` · `4/12` · `5/12` · `6/12` · `7/12` · `8/12` · `9/12` · `10/12` · `11/12` · `auto` · `fit-content` · `max-content` · `min-content`, a number, anything else the types allow - Example: `maxHeight={4}` → `max-height: 1rem` ### `maxWidth` The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width. It also takes `anchor-size()`, a length read off the anchor a floating layer is placed against. - Writes: `max-width` - Values: `fit` · `fit-screen` · `1/1` · `1/2` · `1/3` · `2/3` · `1/4` · `2/4` · `3/4` · `1/5` · `2/5` · `3/5` · `4/5` · `1/6` · `2/6` · `3/6` · `4/6` · `5/6` · `1/12` · `2/12` · `3/12` · `4/12` · `5/12` · `6/12` · `7/12` · `8/12` · `9/12` · `10/12` · `11/12` · `auto` · `fit-content` · `max-content` · `min-content`, a number, anything else the types allow - Example: `maxWidth={4}` → `max-width: 1rem` ### `mb` The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer. - Writes: `margin-bottom` - Values: 55 named values, a number, anything else the types allow - Example: `mb={4}` → `margin-bottom: 1rem` ### `me` The margin-inline-end CSS property sets the margin on the side the text ends at: `mr` in a left-to-right writing mode, `ml` in a right-to-left one. - Writes: `margin-inline-end` - Values: 55 named values, a number, anything else the types allow - Example: `me={4}` → `margin-inline-end: 1rem` ### `minHeight` The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height. It also takes `anchor-size()`, a length read off the anchor a floating layer is placed against. - Writes: `min-height` - Values: `fit` · `fit-screen` · `1/1` · `1/2` · `1/3` · `2/3` · `1/4` · `2/4` · `3/4` · `1/5` · `2/5` · `3/5` · `4/5` · `1/6` · `2/6` · `3/6` · `4/6` · `5/6` · `1/12` · `2/12` · `3/12` · `4/12` · `5/12` · `6/12` · `7/12` · `8/12` · `9/12` · `10/12` · `11/12` · `auto` · `fit-content` · `max-content` · `min-content`, a number, anything else the types allow - Example: `minHeight={4}` → `min-height: 1rem` ### `minWidth` The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width. It also takes `anchor-size()`, a length read off the anchor a floating layer is placed against. - Writes: `min-width` - Values: `fit` · `fit-screen` · `1/1` · `1/2` · `1/3` · `2/3` · `1/4` · `2/4` · `3/4` · `1/5` · `2/5` · `3/5` · `4/5` · `1/6` · `2/6` · `3/6` · `4/6` · `5/6` · `1/12` · `2/12` · `3/12` · `4/12` · `5/12` · `6/12` · `7/12` · `8/12` · `9/12` · `10/12` · `11/12` · `auto` · `fit-content` · `max-content` · `min-content`, a number, anything else the types allow - Example: `minWidth={4}` → `min-width: 1rem` ### `ml` The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. - Writes: `margin-left` - Values: 55 named values, a number, anything else the types allow - Example: `ml={4}` → `margin-left: 1rem` ### `mr` The margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. - Writes: `margin-right` - Values: 55 named values, a number, anything else the types allow - Example: `mr={4}` → `margin-right: 1rem` ### `ms` The margin-inline-start CSS property sets the margin on the side the text starts from: `ml` in a left-to-right writing mode, `mr` in a right-to-left one. - Writes: `margin-inline-start` - Values: 55 named values, a number, anything else the types allow - Example: `ms={4}` → `margin-inline-start: 1rem` ### `mt` The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer. - Writes: `margin-top` - Values: 55 named values, a number, anything else the types allow - Example: `mt={4}` → `margin-top: 1rem` ### `mx` The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. - Writes: `margin-inline` - Values: 55 named values, a number, anything else the types allow - Example: `mx={4}` → `margin-inline: 1rem` ### `my` The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. - Writes: `margin-block` - Values: 55 named values, a number, anything else the types allow - Example: `my={4}` → `margin-block: 1rem` ### `objectFit` The object-fit CSS property sets how the content of a replaced element, such as an or