Box

One component, 235 CSS properties as typed props, and no stylesheet anywhere. This page is the whole of it: what a Box is, the five things that are not what you would guess, and every prop with the CSS it writes.

A Box is one element, and every style is a prop

Box renders a <div> and takes 235 CSS properties as props. There is no stylesheet to import, no class string to compose and no build step: the value you write is checked by the compiler, turned into one CSS rule, and given a class name that every element writing the same value shares.

Import it, and write CSS as props

Ship it

JSX

Playground

import Box from '@box-kite/react';

<Box p={4} borderRadius={2} bgColor="indigo-600" color="white" fontSize={14} fontWeight={600}>
  Ship it
</Box>

That is the entire idea, and most of what follows is consequences of it. The one thing worth knowing before you write anything is where a memory of another library will mislead you — which is the next five cards, and then you are done.

Five things to know first

Each of these typechecks either way, so the compiler will not catch it. They are the whole list.

You might expect · A number is a pixel value.

A number is a step on that prop’s own scale

Spacing, sizing and radius divide by 4; fontSize divides by 16; border width, line height and every duration are written out as they stand. The table two sections down is all nine families with one number in them.

<Box p={16} fontSize={14} b={1} /> // 16px of padding?

<Box p={4} fontSize={14} b={1} /> // padding: 1rem · font-size: 0.875rem · border-width: 1px

You might expect · Anything the props miss goes in style={{ }}.

There is no style prop — css is, and it is a class

It takes the same style object and compiles it into a shared class, so it nests inside hover, a breakpoint or a theme like every other prop and renders on a server. An inline style can do none of that.

<Box style={{ mixBlendMode: 'multiply' }} />

<Box css={{ mixBlendMode: 'multiply' }} />

The whole story: Escape Hatch

You might expect · You pick the element with tag.

The element comes from the component

There is one per tag you are likely to want, each with its defaults already decided. tag is the fallback for the rest, and a display value is never how you pick one.

<Box tag="button"> · <Box tag="h1"> · <Box display="flex">

<Button> · <H1> · <Flex>

You might expect · HTML attributes sit beside the style props.

HTML attributes go in props

Box forwards that object and nothing else. An href or a data-state written at the top level still typechecks — JSX allows any hyphenated attribute — and is then dropped, with nothing anywhere to say so.

<Link href="/about" data-state="open">

<Link props={{ href: '/about', 'data-state': 'open' }}>

You might expect · A hover style needs a second prop, a class or a state hook.

Every prop nests

hover, focus, a breakpoint, a theme and a dozen others each take the same props again, so one element carries every state it has. None of them re-renders anything: they were all in the stylesheet before the page loaded.

<Box bgColor="slate-100" hover={{ bgColor: 'slate-200' }} md={{ p: 6 }} theme={{ dark: { bgColor: 'slate-800' } }} />

The numbers, measured

The divider belongs to the prop, not to the library. Put one number in and see what each family does with it — every line below is the CSS this page asked the real engine for, not a formula written out beside it.

The number you write:

You write	The CSS it writes	Measured in	Why
`p={4}`	`padding: 1rem`	rem, ÷4	The spacing scale. 4 is 1rem, which is the step everything else is a multiple of.
`gap={4}`	`gap: 1rem`	rem, ÷4	Same scale as padding and margin, so a gap lines up with the space around it.
`width={4}`	`width: 1rem`	rem, ÷4	Sizes are on the spacing scale too — and take "1/2", "fit" and "fit-screen" besides.
`borderRadius={4}`	`border-radius: 1rem`	rem, ÷4	The spacing scale again, so a radius matches the padding inside it.
`fontSize={4}`	`font-size: 0.25rem`	rem, ÷16	Divided by 16, so the number you write is the pixel size you meant.
`lineHeight={4}`	`line-height: 4px`	px	A line box is a measurement, not a step on a scale.
`b={4}`	`border-width: 4px`	px	A border is drawn in device pixels. 1 means one pixel, not a quarter of a rem.
`strokeWidth={4}`	`stroke-width: 4`	user units	SVG has its own coordinate system, so no divider and no unit at all.
`transitionDuration={4}`	`transition-duration: 4ms`	ms	Every time on every prop is milliseconds.

p={4}

b={4}

borderRadius={4}

fontSize={4}

A value a prop does not accept writes nothing — no rule and no class name — rather than a broken declaration. That is why the reference below prints the CSS each prop really emits: a typed prop is a promise that what typechecks works.

Build a card, one prop at a time

Six steps, each adding one idea. Copy any of them; they all run as they stand.

1 · A Box is a div

No props at all. Box resets the browser's margins and padding to nothing and decides nothing else.

Monthly revenue

JSX

Playground

<Box>Monthly revenue</Box>

2 · Space and a surface — p, bgColor, borderRadius

p={4} is 1rem on all four sides. A colour is a palette token rather than a hex value, which is what lets a theme move it later.

Monthly revenue

JSX

Playground

<Box p={4} bgColor="white" borderRadius={2}>
  Monthly revenue
</Box>

3 · Edges — b, borderColor, shadow

b={1} is one pixel, not a quarter of a rem: border width is the family written out in pixels. shadow takes a named step rather than four numbers.

Monthly revenue

JSX

Playground

<Box p={4} bgColor="white" borderRadius={2} b={1} borderColor="slate-200" shadow="small">
  Monthly revenue
</Box>

4 · Lay the content out — Flex, never display='flex'

Flex is a Box that has already decided its display, so the intent is in the element. Everything else is still a Box prop.

Monthly revenue

$48,200

JSX

Playground

<Flex d="column" gap={1} p={4} bgColor="white" borderRadius={2} b={1} borderColor="slate-200" shadow="small">
  <Box fontSize={13} fontWeight={500} color="slate-500">Monthly revenue</Box>
  <Box fontSize={28} fontWeight={700} color="slate-900">$48,200</Box>
</Flex>

5 · Answer the pointer — hover, transitionDuration

hover takes the same props again. Nothing re-renders when the pointer arrives: both states were in the stylesheet before the page loaded.

Monthly revenue

$48,200

JSX

Playground

<Flex
  d="column"
  gap={1}
  p={4}
  bgColor="white"
  borderRadius={2}
  b={1}
  borderColor="slate-200"
  shadow="small"
  transitionDuration={150}
  hover={{ shadow: 'medium', translateY: -0.5, borderColor: 'indigo-300' }}
>
  <Box fontSize={13} fontWeight={500} color="slate-500">Monthly revenue</Box>
  <Box fontSize={28} fontWeight={700} color="slate-900">$48,200</Box>
</Flex>

6 · Answer the theme and the width — theme, md

A theme and a breakpoint nest the way hover does. Six props deep, one element, and still no stylesheet — switch this page's theme and watch the card follow.

Monthly revenue

$48,200

JSX

Playground

<Flex
  d="column"
  gap={1}
  p={4}
  md={{ p: 6 }}
  bgColor="white"
  borderRadius={2}
  b={1}
  borderColor="slate-200"
  shadow="small"
  transitionDuration={150}
  hover={{ shadow: 'medium', translateY: -0.5, borderColor: 'indigo-300' }}
  theme={{ dark: { bgColor: 'slate-800', borderColor: 'slate-700', hover: { borderColor: 'indigo-500' } } }}
>
  <Box fontSize={13} fontWeight={500} color="slate-500">Monthly revenue</Box>
  <Box fontSize={28} fontWeight={700} color="slate-900" theme={{ dark: { color: 'white' } }}>$48,200</Box>
</Flex>

One prop, many states

A nesting key takes the same props again, and they compose in either direction — a breakpoint inside a theme, a hover inside a container query. Every combination is one more rule in the stylesheet and no more work at runtime.

A button that answers four different things

JSX

Playground

<Box
  tag="button"
  px={4}
  py={2}
  borderRadius={2}
  bgColor="indigo-600"
  color="white"
  transitionDuration={150}
  hover={{ bgColor: 'indigo-500' }}
  focus={{ outline: 2, outlineColor: 'indigo-400', outlineOffset: 2 }}
  md={{ px: 6 }}
  theme={{ dark: { bgColor: 'indigo-500', hover: { bgColor: 'indigo-400' } } }}
>
  Hover me, focus me, resize me
</Box>

Key	What it selects	Written
`hover, focus, active, disabled, checked, visited, open, …`	A state the browser knows the element is in.	`hover={{ bgColor: 'slate-200' }}`
`sm, md, lg, xl, xxl`	A viewport at least that wide — 640, 768, 1024, 1280, 1536px.	`md={{ p: 6 }}`
`cq`	The width of the nearest container, rather than of the window. Container Queries	`cq={{ md: { d: 'row' } }}`
`theme`	A named theme on an ancestor — light and dark, or one of your own. Theme Setup	`theme={{ dark: { bgColor: 'slate-800' } }}`
`dataAttr, ariaAttr, has, not, nth`	A state your own code sets, what the element contains, or where it sits among its siblings. State Variants	`dataAttr={{ 'state=open': { rotate: 180 } }}`
`group, peer`	Something an ancestor or a preceding sibling is doing. State Variants	`group={{ 'card/hover': { opacity: 1 } }}`
`before, after, placeholder, selection, marker, …`	A pseudo-element. CSS allows one, so the types allow one. Pseudo-Elements	`after={{ content: 'New', color: 'amber-500' }}`
`startingStyle`	What a just-mounted element starts from, so it transitions in. Animation	`startingStyle={{ opacity: 0, translateY: 2 }}`
`motionReduce, forcedColors, contrastMore, pointerCoarse, pointerFine`	What the reader asked their operating system for. Ranked above every breakpoint.	`motionReduce={{ transition: 'none' }}`
`rtl, ltr`	The direction this element resolved to, read off dir. Right to Left	`rtl={{ flip: 'xAxis' }}`

The props that are not styles

Nine names on Box mean something other than CSS. If you are looking for one of these in the reference below, this is why it is not there.

Prop	Type	What it does
`tag`	`'div' \| 'section' \| 'button' \| …`	The element to render. The fallback for a tag no component covers.
`props`	`attributes of that tag`	Every HTML attribute: href, type, name, onClick, role, data-* and aria-*. Box forwards this object and nothing else.
`id`	`string`	Lifted to the top level because an id is written so often. It reaches the element unchanged.
`className`	`string \| string[] \| Record<string, boolean>`	Merged with the classes the engine resolved — for a class from somewhere else, not for styling.
`component, variant`	`a registered name`	The styles a Box.components() entry holds, and one of its variants. Both names are typed.
`clean`	`boolean`	Drop the component defaults this element would otherwise inherit and start from nothing.
`children`	`ReactNode \| (({ isHover }) => ReactNode)`	The content. A function form is handed the hover state.
`style`	`CSSProperties`	It exists, and it is almost never the answer — use css instead. The library itself reaches for it three times, all per instance and per frame: a slider thumb’s offset, an anchor’s name and a dragged widget’s position.

Every prop, searchable

All 235 of them, with the CSS each one writes — measured from the engine when the reference was generated, so an example here is never a guess. Search by prop name, by CSS property or by a value you are looking for.

235 props

Prop	Example	The CSS it writes	What it does
`appearance` Interaction & overflow	`appearance="none"`	`appearance: none`	The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. One of: none, auto, menulist-button, textfield, button, checkbox
`animation` Transform & motion	`animation="spin"`	`animation: spin calc(4 * var(--transitionTime)) linear infinite`	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. One of: spin, pulse, bounce, ping, none
`animationDelay` Transform & motion	`animationDelay={150}`	`animation-delay: 150ms`	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. Takes a number
`animationDirection` Transform & motion	`animationDirection="normal"`	`animation-direction: normal`	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. One of: normal, reverse, alternate, alternate-reverse
`animationDuration` Transform & motion	`animationDuration={1100}`	`animation-duration: 1100ms`	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. One of: spring, spring-gentle, spring-bouncy, spring-snappy
`animationFillMode` Transform & motion	`animationFillMode="none"`	`animation-fill-mode: none`	The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution. One of: none, forwards, backwards, both
`animationIterationCount` Transform & motion	`animationIterationCount={3}`	`animation-iteration-count: 3`	The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping. One of: infinite
`animationName` Transform & motion	`animationName="spin"`	`animation-name: spin`	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.
`animationPlayState` Transform & motion	`animationPlayState="running"`	`animation-play-state: running`	The animation-play-state CSS property sets whether an animation is running or paused. One of: running, paused
`animationRange` Transform & motion	`animationRange="entry"`	`animation-range: entry`	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.
`animationRangeEnd` Transform & motion	`animationRangeEnd="exit"`	`animation-range-end: exit`	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.
`animationRangeStart` Transform & motion	`animationRangeStart="entry 25%"`	`animation-range-start: entry 25%`	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".
`animationTimeline` Transform & motion	`animationTimeline="scroll()"`	`animation-timeline: scroll()`	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' }}`. Includes: none, auto
`animationTimingFunction` Transform & motion	`animationTimingFunction="linear"`	`animation-timing-function: linear`	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. Includes: linear, ease, ease-in, ease-in-out, ease-out, step-start, step-end, spring, spring-gentle, spring-bouncy, spring-snappy
`b` Border	`b={4}`	`border-width: 4px`	The border-width shorthand CSS property sets the width of an element's border. Takes a number
`bx` Border	`bx={4}`	`border-inline-width: 4px`	The border-width shorthand CSS property sets the width of an element's left and right border. Takes a number
`by` Border	`by={4}`	`border-block-width: 4px`	The border-width shorthand CSS property sets the width of an element's top and bottom border. Takes a number
`bt` Border	`bt={4}`	`border-top-width: 4px`	The border-top-width CSS property sets the width of the top border of an element. Takes a number
`br` Border	`br={4}`	`border-right-width: 4px`	The border-right-width CSS property sets the width of the right border of an element. Takes a number
`bb` Border	`bb={4}`	`border-bottom-width: 4px`	The border-bottom-width CSS property sets the width of the bottom border of an element. Takes a number
`bl` Border	`bl={4}`	`border-left-width: 4px`	The border-left-width CSS property sets the width of the left border of an element. Takes a number
`bs` Border	`bs={4}`	`border-inline-start-width: 4px`	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. Takes a number
`be` Border	`be={4}`	`border-inline-end-width: 4px`	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. Takes a number
`borderStyle` Border	`borderStyle="solid"`	`border-style: solid`	The border-style shorthand CSS property sets the line style for all four sides of an element's border. One of: solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden
`borderRadius` Border	`borderRadius={4}`	`border-radius: 1rem`	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. Takes a number
`borderRadiusTop` Border	`borderRadiusTop={4}`	`border-top-left-radius: 1rem; border-top-right-radius: 1rem`	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. Takes a number
`borderRadiusRight` Border	`borderRadiusRight={4}`	`border-top-right-radius: 1rem; border-bottom-right-radius: 1rem`	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. Takes a number
`borderRadiusBottom` Border	`borderRadiusBottom={4}`	`border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem`	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. Takes a number
`borderRadiusLeft` Border	`borderRadiusLeft={4}`	`border-top-left-radius: 1rem; border-bottom-left-radius: 1rem`	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. Takes a number
`borderRadiusTopLeft` Border	`borderRadiusTopLeft={4}`	`border-top-left-radius: 1rem`	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. Takes a number
`borderRadiusTopRight` Border	`borderRadiusTopRight={4}`	`border-top-right-radius: 1rem`	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. Takes a number
`borderRadiusBottomRight` Border	`borderRadiusBottomRight={4}`	`border-bottom-right-radius: 1rem`	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. Takes a number
`borderRadiusBottomLeft` Border	`borderRadiusBottomLeft={4}`	`border-bottom-left-radius: 1rem`	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. Takes a number
`borderRadiusStart` Border	`borderRadiusStart={4}`	`border-start-start-radius: 1rem; border-end-start-radius: 1rem`	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. Takes a number
`borderRadiusEnd` Border	`borderRadiusEnd={4}`	`border-start-end-radius: 1rem; border-end-end-radius: 1rem`	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. Takes a number
`borderRadiusStartStart` Border	`borderRadiusStartStart={4}`	`border-start-start-radius: 1rem`	Rounds the block-start, inline-start corner: top-left in a left-to-right writing mode, top-right in a right-to-left one. Takes a number
`borderRadiusStartEnd` Border	`borderRadiusStartEnd={4}`	`border-start-end-radius: 1rem`	Rounds the block-start, inline-end corner: top-right in a left-to-right writing mode, top-left in a right-to-left one. Takes a number
`borderRadiusEndEnd` Border	`borderRadiusEndEnd={4}`	`border-end-end-radius: 1rem`	Rounds the block-end, inline-end corner: bottom-right in a left-to-right writing mode, bottom-left in a right-to-left one. Takes a number
`borderRadiusEndStart` Border	`borderRadiusEndStart={4}`	`border-end-start-radius: 1rem`	Rounds the block-end, inline-start corner: bottom-left in a left-to-right writing mode, bottom-right in a right-to-left one. Takes a number
`position` Position	`position="absolute"`	`position: absolute`	The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. One of: static, relative, absolute, fixed, sticky
`anchorName` Position	`anchorName="trigger"`	`anchor-name: --trigger`	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. Includes: none
`positionAnchor` Position	`positionAnchor="trigger"`	`position-anchor: --trigger`	Which anchor this element is positioned against, by the name `anchorName` gave it. Needs `position="absolute"` or `"fixed"` beside it — an anchored element is an absolutely positioned one whose containing block comes from the anchor. `auto` picks up the anchor an `anchor()` value names. Includes: auto, none
`positionArea` Position	`positionArea="block-end center"`	`position-area: block-end center`	Which cell of the 3x3 grid around the anchor to sit in, and the whole of what a side and an alignment used to take JS to work out. Block axis first, inline axis second — the order `borderRadiusStartStart` reads in — and the two keywords have to come from one family: `top left` and `block-start inline-start` are values, `top inline-start` is not. `center` and `span-all` join whichever family the other half names. Offset the layer from its anchor with a margin.
`positionTryFallbacks` Position	`positionTryFallbacks="flip-block"`	`position-try-fallbacks: flip-block`	Where to put the layer when it does not fit: `flip-block` tries the opposite side of the block axis, `flip-inline` the inline one, `flip-start` swaps the two axes, and space-separated flips are one position tried together. A comma-separated list is tried in order until one fits, which is the browser doing what a positioning library measures for. A position has to fit on _both_ axes to be taken, so an overflow the flips cannot fix disqualifies every candidate and the layer silently stays where it started. Measured in Chrome 152: with `positionArea="block-end center"` a layer wider than its anchor overflows the centre column, and `flip-block` then does nothing at all. Span the axis being kept — `"block-end span-all"` — and it flips.
`positionTryOrder` Position	`positionTryOrder="normal"`	`position-try-order: normal`	How to choose among the fallbacks rather than taking the first that fits: `most-width`, `most-height`, `most-block-size` and `most-inline-size` each pick the position that leaves the layer most room on that axis. `normal` is first-fit. One of: normal, most-width, most-height, most-block-size, most-inline-size
`positionVisibility` Position	`positionVisibility="always"`	`position-visibility: always`	When to hide the layer instead of positioning it: `anchors-visible` hides it once the anchor is scrolled out of sight, `no-overflow` once the layer itself would overflow, and the two combine. `always` is the default and shows it wherever it lands. It hides at paint time, so the layer keeps its box and its computed `visibility` still reads `visible` — `checkVisibility()` agrees. Both were measured in Chrome 152 by sampling the pixel: the only thing that changes is that nothing is painted and nothing hit-tests. A test asserting this needs a screenshot, not a computed style. One of: always, anchors-visible, no-overflow, anchors-visible no-overflow
`top` Position	`top={4}`	`top: 1rem`	The top CSS property sets 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. Includes: 55 named values
`right` Position	`right={4}`	`right: 1rem`	The right 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. Includes: 55 named values
`bottom` Position	`bottom={4}`	`bottom: 1rem`	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. Includes: 55 named values
`left` Position	`left={4}`	`left: 1rem`	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. Includes: 55 named values
`inset` Position	`inset={4}`	`inset: 1rem`	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. Includes: 55 named values
`insetX` Position	`insetX={4}`	`inset-inline: 1rem`	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`. Includes: 55 named values
`insetY` Position	`insetY={4}`	`inset-block: 1rem`	The inset-block CSS shorthand sets both insets on the block axis — `top` and `bottom` in a horizontal writing mode. Includes: 55 named values
`insetStart` Position	`insetStart={4}`	`inset-inline-start: 1rem`	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. Includes: 55 named values
`insetEnd` Position	`insetEnd={4}`	`inset-inline-end: 1rem`	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. Includes: 55 named values
`boxSizing` Size	`boxSizing="border-box"`	`box-sizing: border-box`	The `box-sizing` CSS property sets how the total width and height of an element is calculated. One of: border-box, content-box
`contentVisibility` Interaction & overflow	`contentVisibility="visible"`	`content-visibility: visible`	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. One of: visible, hidden, auto
`clipPath` Interaction & overflow	`clipPath="inset(50%)"`	`clip-path: inset(50%)`	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 `<ClipPath>` in the document is `clipPath="url(#frame)"`. Includes: inset(50%), none
`cursor` Interaction & overflow	`cursor="pointer"`	`cursor: pointer`	The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element. One of: auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text and 24 more
`display` Layout	`display="none"`	`display: none`	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. One of: none, block, inline, inline-block, flex, inline-flex, grid, inline-grid, contents, list-item, table, table-header-group and 3 more
`inline` Layout	`inline`	`display: inline-block`	The `inline` property is a shortcut to transform `block`, `flex` and `grid` value to `inline-block`, `inline-flex` and `inline-grid` respectively. One of: true
`borderCollapse` Layout	`borderCollapse="collapse"`	`border-collapse: collapse`	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. One of: collapse, separate
`borderSpacing` Layout	`borderSpacing={2}`	`border-spacing: 0.5rem`	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. Takes a number
`tableLayout` Layout	`tableLayout="fixed"`	`table-layout: fixed`	`fixed` sizes a table from its own width and its first row rather than from every cell in it, so one long cell cannot widen the column it sits in — and the table lays out in one pass instead of after measuring all of it. One of: auto, fixed
`container` Layout	`container`	`container-type: inline-size`	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. Includes: true
`containerName` Layout	`containerName="sidebar"`	`container-name: sidebar`	The name `cq={{ 'sidebar/md': … }}` addresses. Only a query container answers, so pair it with `containerType`.
`containerType` Layout	`containerType="inline-size"`	`container-type: inline-size`	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. One of: inline-size, size, normal
`interpolateSize` Size	`interpolateSize="numeric-only"`	`interpolate-size: numeric-only`	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. One of: numeric-only, allow-keywords
`jc` Layout	`jc="start"`	`justify-content: start`	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. One of: start, end, flex-start, flex-end, center, left, right, space-between, space-around, space-evenly, stretch, safe center and 5 more
`ai` Layout	`ai="stretch"`	`align-items: stretch`	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. One of: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end, safe center, safe start, safe end and 3 more
`justifyItems` Layout	`justifyItems="normal"`	`justify-items: normal`	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. One of: normal, start, end, center, stretch, baseline, left, right, self-start, self-end, safe center, safe start and 4 more
`placeItems` Layout	`placeItems="normal"`	`place-items: normal`	The place-items CSS shorthand sets `align-items` and `justify-items` in one declaration — `placeItems="center"` is the whole of grid centring. One of: normal, start, end, center, stretch, baseline, self-start, self-end, safe center, safe start, safe end, unsafe center and 2 more
`placeContent` Layout	`placeContent="start"`	`place-content: start`	The place-content CSS shorthand sets `alignContent` and `justifyContent` at once, so one keyword places a grid’s tracks on both axes. It takes the overflow-safe alignments too, and they apply to both. One of: start, end, flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, baseline, safe center, safe start and 4 more
`alignContent` Layout	`alignContent="flex-start"`	`align-content: flex-start`	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. One of: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline, normal, safe center and 5 more
`flex1` Layout	`flex1`	`flex: 1`	The flex CSS shorthand property sets flex to fit the space available in its flex container. One of: true
`d` Layout	`d="row"`	`flex-direction: row`	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). One of: row, row-reverse, column, column-reverse
`flexWrap` Layout	`flexWrap="nowrap"`	`flex-wrap: nowrap`	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. One of: nowrap, wrap, wrap-reverse
`flexGrow` Layout	`flexGrow={4}`	`flex-grow: 4`	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. Takes a number
`flexShrink` Layout	`flexShrink={4}`	`flex-shrink: 4`	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. Takes a number
`alignSelf` Layout	`alignSelf="auto"`	`align-self: auto`	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. One of: auto, flex-start, flex-end, center, baseline, stretch, start, end, self-start, self-end, anchor-center, safe center and 5 more
`justifySelf` Layout	`justifySelf="auto"`	`justify-self: auto`	The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis. One of: auto, flex-start, flex-end, center, baseline, stretch, start, end, left, right, self-start, self-end and 7 more
`fontSize` Text	`fontSize={14}`	`font-size: 0.875rem`	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. One of: inherit
`fontStyle` Text	`fontStyle="italic"`	`font-style: italic`	The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family. One of: italic, normal, oblique
`fontWeight` Text	`fontWeight={700}`	`font-weight: 700`	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. One of: 100, 200, 300, 400, 500, 600, 700, 800, 900
`gap` Spacing	`gap={4}`	`gap: 1rem`	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. Takes a number
`rowGap` Spacing	`rowGap={4}`	`row-gap: 1rem`	The row-gap CSS property sets the size of the gap (gutter) between an element's rows. Takes a number
`columnGap` Spacing	`columnGap={4}`	`column-gap: 1rem`	The column-gap CSS property sets the size of the gap (gutter) between an element's columns. Takes a number
`order` Layout	`order={4}`	`order: 4`	The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. Items not given an explicit order value are assigned the default value of 0. Takes a number
`height` Size	`height={4}`	`height: 1rem`	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. Includes: fit, fit-screen, 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5 and 21 more
`minHeight` Size	`minHeight={4}`	`min-height: 1rem`	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. Includes: fit, fit-screen, 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5 and 21 more
`maxHeight` Size	`maxHeight={4}`	`max-height: 1rem`	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. Includes: fit, fit-screen, 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5 and 21 more
`width` Size	`width={4}`	`width: 1rem`	The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area. It also takes `anchor-size()`, a length read off the anchor a floating layer is placed against. Includes: fit, fit-screen, 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5 and 21 more
`minWidth` Size	`minWidth={4}`	`min-width: 1rem`	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. Includes: fit, fit-screen, 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5 and 21 more
`maxWidth` Size	`maxWidth={4}`	`max-width: 1rem`	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. Includes: fit, fit-screen, 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5 and 21 more
`aspectRatio` Size	`aspectRatio="video"`	`aspect-ratio: 16 / 9`	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. Includes: auto, square, video
`letterSpacing` Text	`letterSpacing={4}`	`letter-spacing: 4px`	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. Takes a number
`lineHeight` Text	`lineHeight={24}`	`line-height: 24px`	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. One of: font-size
`listStyle` Text	`listStyle="disc"`	`list-style: disc`	The list-style CSS shorthand property allows you to set all the list style properties at once. One of: disc, circle, square, decimal, inside, outside, none
`m` Spacing	`m={4}`	`margin: 1rem`	The margin CSS shorthand property sets the margin area on all four sides of an element. Includes: 55 named values
`mx` Spacing	`mx={4}`	`margin-inline: 1rem`	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. Includes: 55 named values
`my` Spacing	`my={4}`	`margin-block: 1rem`	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. Includes: 55 named values
`mt` Spacing	`mt={4}`	`margin-top: 1rem`	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. Includes: 55 named values
`mr` Spacing	`mr={4}`	`margin-right: 1rem`	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. Includes: 55 named values
`mb` Spacing	`mb={4}`	`margin-bottom: 1rem`	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. Includes: 55 named values
`ml` Spacing	`ml={4}`	`margin-left: 1rem`	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. Includes: 55 named values
`ms` Spacing	`ms={4}`	`margin-inline-start: 1rem`	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. Includes: 55 named values
`me` Spacing	`me={4}`	`margin-inline-end: 1rem`	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. Includes: 55 named values
`p` Spacing	`p={4}`	`padding: 1rem`	The padding CSS shorthand property sets the padding area on all four sides of an element at once. Includes: 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6 and 15 more
`px` Spacing	`px={4}`	`padding-inline: 1rem`	The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. Includes: 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6 and 15 more
`py` Spacing	`py={4}`	`padding-block: 1rem`	The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. Includes: 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6 and 15 more
`pt` Spacing	`pt={4}`	`padding-top: 1rem`	The padding-top CSS property sets the height of the padding area on the top of an element. Includes: 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6 and 15 more
`pr` Spacing	`pr={4}`	`padding-right: 1rem`	The padding-right CSS property sets the width of the padding area on the right of an element. Includes: 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6 and 15 more
`pb` Spacing	`pb={4}`	`padding-bottom: 1rem`	The padding-bottom CSS property sets the height of the padding area on the bottom of an element. Includes: 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6 and 15 more
`pl` Spacing	`pl={4}`	`padding-left: 1rem`	The padding-left CSS property sets the width of the padding area to the left of an element. Includes: 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6 and 15 more
`ps` Spacing	`ps={4}`	`padding-inline-start: 1rem`	The padding-inline-start CSS property sets the padding on the side the text starts from: `pl` in a left-to-right writing mode, `pr` in a right-to-left one. Includes: 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6 and 15 more
`pe` Spacing	`pe={4}`	`padding-inline-end: 1rem`	The padding-inline-end CSS property sets the padding on the side the text ends at: `pr` in a left-to-right writing mode, `pl` in a right-to-left one. Includes: 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6 and 15 more
`objectFit` Size	`objectFit="fill"`	`object-fit: fill`	The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. One of: fill, contain, cover, scale-down, none
`opacity` Background & effects	`opacity={0.5}`	`opacity: 0.5`	The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. One of: 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1
`outline` Border	`outline={4}`	`outline-width: 4px; outline-style: solid`	The CSS outline-width property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border. A width alone is enough: the style comes with it, and `outlineStyle` — declared after this — is what changes it. Takes a number
`outlineStyle` Border	`outlineStyle="solid"`	`outline-style: solid`	The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border. One of: solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden
`outlineOffset` Border	`outlineOffset={4}`	`outline-offset: 4px`	The outline-offset CSS property sets the amount of space between an outline and the edge or border of an element. Takes a number
`overflow` Interaction & overflow	`overflow="auto"`	`overflow: auto`	The overflow CSS shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction. One of: auto, hidden, scroll, visible
`overflowX` Interaction & overflow	`overflowX="auto"`	`overflow-x: auto`	The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. One of: auto, hidden, scroll, visible
`overflowY` Interaction & overflow	`overflowY="auto"`	`overflow-y: auto`	The overflow-y CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. One of: auto, hidden, scroll, visible
`pointerEvents` Interaction & overflow	`pointerEvents="none"`	`pointer-events: none`	The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. One of: none, auto, all
`resize` Interaction & overflow	`resize="none"`	`resize: none`	The resize CSS property sets whether an element is resizable, and if so, in which directions. One of: none, both, horizontal, vertical, block, inline
`rotate` Transform & motion	`rotate={45}`	`rotate: 45deg`	The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property. One of: 0, 45, 90, 135, 180, 270, 360, -45, -90, -135, -180, -270
`flip` Transform & motion	`flip="xAxis"`	`scale: -1 1`	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. One of: xAxis, yAxis
`scale` Transform & motion	`scale={4}`	`scale: 4`	The scale CSS property lets you specify scale transforms individually and independently of the transform property: `scale={1.05}` is 105% in both axes. Declared after `flip`, which writes the same property — use one or the other, not both. Takes a number
`textAlign` Text	`textAlign="left"`	`text-align: left`	The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. `start`/`end` follow the text direction where `left`/`right` do not. One of: left, right, start, end, center, justify
`textDecoration` Text	`textDecoration="none"`	`text-decoration: none`	The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property. One of: none, underline, overline, line-through
`textOverflow` Text	`textOverflow="clip"`	`text-overflow: clip`	The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string. One of: clip, ellipsis
`textTransform` Text	`textTransform="none"`	`text-transform: none`	The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby. One of: none, capitalize, lowercase, uppercase
`textWrap` Text	`textWrap="wrap"`	`text-wrap: wrap`	The text-wrap CSS shorthand property controls how text inside an element is wrapped. The different values provide: One of: wrap, nowrap, balance, pretty
`transition` Transform & motion	`transition="colors"`	`transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke`	What a transition applies to: `all` (what the base class already does), `none`, or one of the property groups — `colors`, `opacity`, `shadow`, `transform`, `size`, `filter`. One of: none, all, colors, opacity, shadow, transform, size, filter
`transitionBehavior` Transform & motion	`transitionBehavior="normal"`	`transition-behavior: normal`	Whether the properties that cannot be interpolated transition at all: `display`, `overlay`, `content-visibility`. `allow-discrete` flips them at the end of the transition instead of the start, which is what keeps an element in the DOM long enough to animate out of it. One of: normal, allow-discrete
`transitionDelay` Transform & motion	`transitionDelay={150}`	`transition-delay: 150ms`	The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes. Milliseconds. Takes a number
`transitionDuration` Transform & motion	`transitionDuration={200}`	`transition-duration: 200ms`	How long a transition takes. Milliseconds, like every other time here — or a spring name, which is that spring's settling time in `--transitionTime` units, so a spring stops under reduced motion. One of: spring, spring-gentle, spring-bouncy, spring-snappy
`transitionTimingFunction` Transform & motion	`transitionTimingFunction="linear"`	`transition-timing-function: linear`	How a transition gets from one value to the other: a keyword, one of the four sampled springs (`spring`, `spring-gentle`, `spring-bouncy`, `spring-snappy`), or a curve — `cubic-bezier()`, `steps()` and `linear()` are values. A spring's other half is `transitionDuration`, which takes the same four names. Includes: linear, ease, ease-in, ease-in-out, ease-out, step-start, step-end, spring, spring-gentle, spring-bouncy, spring-snappy
`willChange` Transform & motion	`willChange="transform"`	`will-change: transform`	The will-change CSS property warns the browser that a property is about to change, so it can promote the element first instead of mid-animation. A hint with a real cost — a promoted layer holds memory and can force text off subpixel rendering — so it belongs on the few elements that animate, not on a list. One of: auto, scroll-position, contents, transform, opacity, filter
`userSelect` Interaction & overflow	`userSelect="none"`	`user-select: none`	The user-select CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes. One of: none, auto, text, all
`visibility` Interaction & overflow	`visibility="visible"`	`visibility: visible`	The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>. One of: visible, hidden, collapse
`whiteSpace` Text	`whiteSpace="break-spaces"`	`white-space: break-spaces`	The white-space CSS property sets how white space inside an element is handled. One of: break-spaces, normal, nowrap, pre, pre-line, pre-wrap
`zIndex` Position	`zIndex={1}`	`z-index: 1`	The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one. One of: 1, 2, 3, 4, 5, 10, 11, 12, 13, 14, 15, 100 and 11 more
`gridTemplateColumns` Layout	`gridTemplateColumns={4}`	`grid-template-columns: repeat(4,minmax(0,1fr))`	The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns. One of: subgrid
`gridTemplateRows` Layout	`gridTemplateRows={4}`	`grid-template-rows: repeat(4,minmax(0,1fr))`	The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows. One of: subgrid
`gridColumn` Layout	`gridColumn={4}`	`grid-column: span 4/span 4`	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. One of: full-row
`gridColumnStart` Layout	`gridColumnStart={4}`	`grid-column-start: 4`	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. Takes a number
`gridColumnEnd` Layout	`gridColumnEnd={4}`	`grid-column-end: 4`	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. Takes a number
`gridRow` Layout	`gridRow={4}`	`grid-row: span 4/span 4`	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. One of: full-column
`gridRowStart` Layout	`gridRowStart={4}`	`grid-row-start: 4`	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. Takes a number
`gridRowEnd` Layout	`gridRowEnd={4}`	`grid-row-end: 4`	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. Takes a number
`color` Color	`color="sky-500"`	`color: var(--sky-500,oklch(68.5% .169 237.3))`	The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value. Includes: 304 named values
`bgColor` Color	`bgColor="sky-500"`	`background-color: var(--sky-500,oklch(68.5% .169 237.3))`	The background-color CSS property sets the background color of an element. Includes: 304 named values
`borderColor` Color	`borderColor="sky-500"`	`border-color: var(--sky-500,oklch(68.5% .169 237.3))`	The border-color shorthand CSS property sets the color of an element's border. Includes: 304 named values
`outlineColor` Color	`outlineColor="sky-500"`	`outline-color: var(--sky-500,oklch(68.5% .169 237.3))`	The outline-color CSS property sets the color of an element's outline. Includes: 304 named values
`accentColor` Color	`accentColor="sky-500"`	`accent-color: var(--sky-500,oklch(68.5% .169 237.3))`	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. Includes: 304 named values
`caretColor` Color	`caretColor="sky-500"`	`caret-color: var(--sky-500,oklch(68.5% .169 237.3))`	The caret-color CSS property sets the colour of the insertion caret in a text field or any editable element. Includes: 304 named values
`colorScheme` Color	`colorScheme="normal"`	`color-scheme: normal`	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. One of: normal, light, dark, light dark, only light, only dark
`fieldSizing` Interaction & overflow	`fieldSizing="content"`	`field-sizing: content`	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. One of: content, fixed
`fill` SVG	`fill="sky-500"`	`fill: var(--sky-500,oklch(68.5% .169 237.3))`	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 `<LinearGradient>` or a pattern) or a variable somebody else declared (`fill="var(--chart-1)"`). Includes: 304 named values
`fillOpacity` SVG	`fillOpacity={0.5}`	`fill-opacity: 0.5`	The fill-opacity CSS property defines the opacity of the paint applied to the interior of an SVG shape or to SVG text. One of: 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1
`fillRule` SVG	`fillRule="nonzero"`	`fill-rule: nonzero`	The fill-rule CSS property defines which parts of a self-intersecting SVG shape count as inside it, and are therefore filled. One of: nonzero, evenodd
`stroke` SVG	`stroke="sky-500"`	`stroke: var(--sky-500,oklch(68.5% .169 237.3))`	The stroke CSS property defines the color or SVG paint server used to draw an element's stroke. Takes a colour token, `stroke="url(#sky)"` for a paint server the document defines, or `stroke="var(--chart-1)"` for a variable somebody else declared. Includes: 304 named values
`strokeOpacity` SVG	`strokeOpacity={0.5}`	`stroke-opacity: 0.5`	The stroke-opacity CSS property defines the opacity of the paint applied to an SVG element's stroke. One of: 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1
`strokeWidth` SVG	`strokeWidth={4}`	`stroke-width: 4`	The stroke-width CSS property sets the width of an SVG element's stroke, in user units — `strokeWidth={2}` is `stroke-width: 2`, no divider. Takes a number
`strokeLinecap` SVG	`strokeLinecap="butt"`	`stroke-linecap: butt`	The stroke-linecap CSS property defines the shape drawn at the two ends of an open SVG subpath. One of: butt, round, square
`strokeLinejoin` SVG	`strokeLinejoin="miter"`	`stroke-linejoin: miter`	The stroke-linejoin CSS property defines the shape drawn where two segments of an SVG path meet. One of: miter, round, bevel
`strokeMiterlimit` SVG	`strokeMiterlimit={4}`	`stroke-miterlimit: 4`	The stroke-miterlimit CSS property sets how far a miter join may extend before it is cut back to a bevel. Values below 1 are invalid. Takes a number
`strokeDasharray` SVG	`strokeDasharray={4}`	`stroke-dasharray: 4`	The stroke-dasharray CSS property turns an SVG stroke into dashes: a single number is the dash and the gap alike, a string is the full pattern (`'8 4'`). Lengths are user units. Takes a number
`strokeDashoffset` SVG	`strokeDashoffset={4}`	`stroke-dashoffset: 4`	The stroke-dashoffset CSS property moves the dash pattern along the path — the property a path-drawing animation transitions. A percentage is of the path's own length. Takes a number
`paintOrder` SVG	`paintOrder="normal"`	`paint-order: normal`	The paint-order CSS property sets what is painted first. `paintOrder="stroke"` puts the stroke behind the fill, which is how outlined SVG text stays legible. One of: normal, fill, stroke, markers
`vectorEffect` SVG	`vectorEffect="none"`	`vector-effect: none`	How an SVG element's stroke reacts to the transforms above it: `non-scaling-stroke` keeps a hairline one pixel wide at any scale. Not inherited, so its rule targets the element and its descendants — the only way the prop can mean anything on an `<svg>`. One of: none, non-scaling-stroke
`shapeRendering` SVG	`shapeRendering="auto"`	`shape-rendering: auto`	The shape-rendering CSS property tells the renderer what to trade away when drawing an SVG shape — `crispEdges` turns off anti-aliasing, which is what pixel-exact gridlines want. One of: auto, optimizeSpeed, crispEdges, geometricPrecision
`textAnchor` SVG	`textAnchor="start"`	`text-anchor: start`	Which part of SVG text sits on its `x`: `middle` centres an axis label under a tick. Inherited, so a value on the `<svg>` is the default for every label in it. One of: start, middle, end
`dominantBaseline` SVG	`dominantBaseline="auto"`	`dominant-baseline: auto`	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. One of: auto, text-bottom, alphabetic, ideographic, middle, central, mathematical, hanging, text-top
`cx` SVG	`cx={4}`	`cx: 4`	The centre of a `<circle>` or `<ellipse>`, horizontally, in user units. Real CSS, so unlike the attribute it transitions — moving a point on hover is one prop and no JavaScript. Takes a number
`cy` SVG	`cy={4}`	`cy: 4`	The cy CSS property positions the centre of a `<circle>` or an `<ellipse>` vertically, in user units. Transitions like `cx`. Takes a number
`r` SVG	`r={4}`	`r: 4`	The r CSS property sets the radius of a `<circle>`, in user units. Transition it and the circle grows; a percentage is of the viewport's diagonal. Takes a number
`rx` SVG	`rx={4}`	`rx: 4`	The horizontal radius of an `<ellipse>` or corner radius of a `<rect>` — `borderRadius` for SVG, in user units rather than on the spacing scale. `auto` takes the radius from `ry`. Includes: auto
`ry` SVG	`ry={4}`	`ry: 4`	The ry CSS property sets the vertical radius of an `<ellipse>` or the vertical corner radius of a `<rect>`, in user units. `auto` takes it from `rx`. Includes: auto
`x` SVG	`x={4}`	`x: 4`	Positions a `<rect>`, `<image>`, `<use>`, `<foreignObject>` or nested `<svg>` horizontally, in user units. Not `<text>`, whose `x` takes a list of positions and stays an attribute — pass it in `props`. Takes a number
`y` SVG	`y={4}`	`y: 4`	The y CSS property positions a `<rect>`, `<image>`, `<use>`, `<foreignObject>` or a nested `<svg>` vertically, in user units. Not for `<text>` — see `x`. Takes a number
`bgImage` Background & effects	`bgImage="gradient-primary"`	`background-image: var(--gradient-primary,linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%))`	The background-image CSS property sets one or more background images on an element. One of: gradient-primary, gradient-aurora-light, gradient-aurora-dark, gradient-accent, bg-img-checked, bg-img-indeterminate, bg-img-radio, none
`bgGradient` Background & effects	`bgGradient={{linear: "r", colors: ["blue-500", "pink-500"]}}`	`background-image: linear-gradient(to right,var(--blue-500,oklch(62.3% .214 259.8)),var(--pink-500,oklch(65.6% .241 354.3)))`	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.
`shadow` Background & effects	`shadow="xxs"`	`--boxShadow: 0 1px var(--boxShadowColor, 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)`	The elevation of the box: `xxs` through `xxl` on the elevation scale, or one of the three original presets (`small`, `medium`, `large`, which carry their own colour). `shadowColor` recolours the scale, and the shadow stacks with `ring`, `insetRing` and `insetShadow` rather than replacing them. One of: xxs, xs, sm, md, lg, xl, xxl, none, small, medium, large
`shadowColor` Background & effects	`shadowColor="sky-500"`	`--boxShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`	What colour `shadow` draws in — the scale's own translucent black otherwise. Shows nothing on its own. Includes: 304 named values
`insetShadow` Background & effects	`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)`	A shadow drawn inside the border box: `xxs`, `xs` or `sm`. Its own layer, so it composes with `shadow`. One of: xxs, xs, sm, none
`insetShadowColor` Background & effects	`insetShadowColor="sky-500"`	`--boxInsetShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`	What colour `insetShadow` draws in. Shows nothing on its own. Includes: 304 named values
`ring` Background & effects	`ring={4}`	`--boxRing: 0 0 0 4px var(--boxRingColor, currentColor); box-shadow: var(--boxInsetShadow, 0 0 #0000),var(--boxInsetRing, 0 0 #0000),var(--boxRing, 0 0 #0000),var(--boxShadow, 0 0 #0000)`	A hard-edged shadow outside the border box, in px — `ring={2}`. Unlike `outline` it takes part in the shadow stack, so a ring and an elevation coexist; it follows `borderRadius` and costs no layout. Takes a number
`ringColor` Background & effects	`ringColor="sky-500"`	`--boxRingColor: var(--sky-500,oklch(68.5% .169 237.3))`	What colour `ring` draws in. `currentColor` otherwise. Includes: 304 named values
`insetRing` Background & effects	`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)`	The same ring, drawn inside the border box: an inner hairline that needs no second element. Takes a number
`insetRingColor` Background & effects	`insetRingColor="sky-500"`	`--boxInsetRingColor: var(--sky-500,oklch(68.5% .169 237.3))`	What colour `insetRing` draws in. `currentColor` otherwise. Includes: 304 named values
`textShadow` Text	`textShadow="xxs"`	`text-shadow: 0px 1px 0px var(--boxTextShadowColor, rgb(0 0 0 / .15))`	A shadow behind the text rather than the box: `xxs` through `lg`, recoloured by `textShadowColor`. One of: xxs, xs, sm, md, lg, none
`textShadowColor` Text	`textShadowColor="sky-500"`	`--boxTextShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`	What colour `textShadow` draws in. Shows nothing on its own. Includes: 304 named values
`blur` Background & effects	`blur={3}`	`--boxBlur: blur(3px); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)`	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. One of: xs, sm, md, lg, xl, xxl, xxxl, none
`brightness` Background & effects	`brightness={110}`	`--boxBrightness: brightness(110%); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)`	How bright the element is rendered, as a percentage: `brightness={110}` is 10% brighter, `{50}` is half. One of: none
`contrast` Background & effects	`contrast={125}`	`--boxContrast: contrast(125%); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)`	How much contrast the element is rendered with, as a percentage — `100` being the element as it is. One of: none
`grayscale` Background & effects	`grayscale={100}`	`--boxGrayscale: grayscale(100%); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)`	How far the element is desaturated, as a percentage: `grayscale={100}` removes colour entirely. One of: none
`hueRotate` Background & effects	`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,)`	How far every hue in the element is rotated round the colour circle, in degrees. One of: none
`invert` Background & effects	`invert={100}`	`--boxInvert: invert(100%); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)`	How far the element's colours are inverted, as a percentage: `invert={100}` is a photographic negative. One of: none
`saturate` Background & effects	`saturate={180}`	`--boxSaturate: saturate(180%); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)`	How saturated the element is rendered, as a percentage — over `100` to push the colour, under to drain it. One of: none
`sepia` Background & effects	`sepia={100}`	`--boxSepia: sepia(100%); filter: var(--boxBlur,) var(--boxBrightness,) var(--boxContrast,) var(--boxGrayscale,) var(--boxHueRotate,) var(--boxInvert,) var(--boxSaturate,) var(--boxSepia,) var(--boxDropShadow,)`	How far the element is pushed towards sepia, as a percentage. One of: none
`dropShadow` Background & effects	`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,)`	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. One of: xs, sm, md, lg, xl, xxl, none
`dropShadowColor` Background & effects	`dropShadowColor="sky-500"`	`--boxDropShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`	What colour `dropShadow` draws in. Shows nothing on its own. Includes: 304 named values
`backdropBlur` Background & effects	`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,)`	How far what is behind the element is blurred — the glassmorphism half. Needs something translucent in front of it. One of: xs, sm, md, lg, xl, xxl, xxxl, none
`backdropBrightness` Background & effects	`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,)`	How bright what is behind the element is rendered, as a percentage. One of: none
`backdropContrast` Background & effects	`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,)`	How much contrast what is behind the element is rendered with, as a percentage. One of: none
`backdropGrayscale` Background & effects	`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,)`	How far what is behind the element is desaturated, as a percentage. One of: none
`backdropHueRotate` Background & effects	`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,)`	How far every hue behind the element is rotated round the colour circle, in degrees. One of: none
`backdropInvert` Background & effects	`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,)`	How far the colours behind the element are inverted, as a percentage. One of: none
`backdropOpacity` Background & effects	`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,)`	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. One of: none
`backdropSaturate` Background & effects	`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,)`	How saturated what is behind the element is rendered, as a percentage. One of: none
`backdropSepia` Background & effects	`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,)`	How far what is behind the element is pushed towards sepia, as a percentage. One of: none
`maskImage` Background & effects	`maskImage={{linear: "b", colors: ["black", "transparent"]}}`	`mask-image: linear-gradient(to bottom,var(--black,#000),var(--transparent,transparent))`	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. Includes: none
`bgClip` Background & effects	`bgClip="text"`	`background-clip: text`	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. One of: border, padding, content, text
`translateX` Transform & motion	`translateX={4}`	`--boxTranslateX: 1rem; translate: var(--boxTranslateX, 0) var(--boxTranslateY, 0)`	Moves an element horizontally on the 2D plane, on the ÷4 spacing scale, as a fraction of its own width (`'1/2'`) or as a percentage. Composes with `translateY`. Includes: 54 named values
`translateY` Transform & motion	`translateY={4}`	`--boxTranslateY: 1rem; translate: var(--boxTranslateX, 0) var(--boxTranslateY, 0)`	Moves an element vertically on the 2D plane, on the ÷4 spacing scale, as a fraction of its own height (`'1/2'`) or as a percentage. Composes with `translateX`. Includes: 54 named values
`content` Text	`content="New"`	`content: "New"`	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"`. Includes: empty, none, normal, open-quote, close-quote, no-open-quote, no-close-quote
`backdropFilter` Background & effects	`backdropFilter="none"`	`backdrop-filter: none`	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. One of: none, blur(12px), blur(8px), blur(4px)
`scrollbarWidth` Interaction & overflow	`scrollbarWidth="auto"`	`scrollbar-width: auto`	How wide a scrollbar the browser draws. `none` hides it without taking the scrolling away, so a wheel and the keys still reach the content — unlike `overflow: hidden`, which stops both. One of: auto, thin, none
`scrollbarColor` Interaction & overflow	`scrollbarColor={["gray-400", "gray-100"]}`	`scrollbar-color: var(--gray-400,oklch(70.7% .022 261.3)) var(--gray-100,oklch(96.7% .003 264.5))`	The scrollbar-color CSS property sets the color of the scrollbar thumb and track. The value pair is [thumbColor, trackColor]. One of: currentColor,transparent,green,red,blue,gray,black,white,vi,slate-50,slate-100,slate-200,slate-300,slate-400,slate-500,slate-600,slate-700,slate-800,slate-900,slate-950,gray-50,gray-100,gray-200,gray-300,gray-400,gray-500,gray-600,gray-700,gray-800,gray-900,gray-950,zinc-50,zinc-100,zinc-200,zinc-300,zinc-400,zinc-500,zinc-600,zinc-700,zinc-800,zinc-900,zinc-950,neutral-50,neutral-100,neutral-200,neutral-300,neutral-400,neutral-500,neutral-600,neutral-700,neutral-800,neutral-900,neutral-950,stone-50,stone-100,stone-200,stone-300,stone-400,stone-500,stone-600,stone-700,stone-800,stone-900,stone-950,mauve-50,mauve-100,mauve-200,mauve-300,mauve-400,mauve-500,mauve-600,mauve-700,mauve-800,mauve-900,mauve-950,mist-50,mist-100,mist-200,mist-300,mist-400,mist-500,mist-600,mist-700,mist-800,mist-900,mist-950,olive-50,olive-100,olive-200,olive-300,olive-400,olive-500,olive-600,olive-700,olive-800,olive-900,olive-950,taupe-50,taupe-100,taupe-200,taupe-300,taupe-400,taupe-500,taupe-600,taupe-700,taupe-800,taupe-900,taupe-950,red-50,red-100,red-200,red-300,red-400,red-500,red-600,red-700,red-800,red-900,red-950,orange-50,orange-100,orange-200,orange-300,orange-400,orange-500,orange-600,orange-700,orange-800,orange-900,orange-950,amber-50,amber-100,amber-200,amber-300,amber-400,amber-500,amber-600,amber-700,amber-800,amber-900,amber-950,yellow-50,yellow-100,yellow-200,yellow-300,yellow-400,yellow-500,yellow-600,yellow-700,yellow-800,yellow-900,yellow-950,lime-50,lime-100,lime-200,lime-300,lime-400,lime-500,lime-600,lime-700,lime-800,lime-900,lime-950,green-50,green-100,green-200,green-300,green-400,green-500,green-600,green-700,green-800,green-900,green-950,emerald-50,emerald-100,emerald-200,emerald-300,emerald-400,emerald-500,emerald-600,emerald-700,emerald-800,emerald-900,emerald-950,teal-50,teal-100,teal-200,teal-300,teal-400,teal-500,teal-600,teal-700,teal-800,teal-900,teal-950,cyan-50,cyan-100,cyan-200,cyan-300,cyan-400,cyan-500,cyan-600,cyan-700,cyan-800,cyan-900,cyan-950,sky-50,sky-100,sky-200,sky-300,sky-400,sky-500,sky-600,sky-700,sky-800,sky-900,sky-950,blue-50,blue-100,blue-200,blue-300,blue-400,blue-500,blue-600,blue-700,blue-800,blue-900,blue-950,indigo-50,indigo-100,indigo-200,indigo-300,indigo-400,indigo-500,indigo-600,indigo-700,indigo-800,indigo-900,indigo-950,violet-50,violet-100,violet-200,violet-300,violet-400,violet-500,violet-600,violet-700,violet-800,violet-900,violet-950,purple-50,purple-100,purple-200,purple-300,purple-400,purple-500,purple-600,purple-700,purple-800,purple-900,purple-950,fuchsia-50,fuchsia-100,fuchsia-200,fuchsia-300,fuchsia-400,fuchsia-500,fuchsia-600,fuchsia-700,fuchsia-800,fuchsia-900,fuchsia-950,pink-50,pink-100,pink-200,pink-300,pink-400,pink-500,pink-600,pink-700,pink-800,pink-900,pink-950,rose-50,rose-100,rose-200,rose-300,rose-400,rose-500,rose-600,rose-700,rose-800,rose-900,rose-950,none
`scrollbarGutter` Interaction & overflow	`scrollbarGutter="auto"`	`scrollbar-gutter: auto`	The scrollbar-gutter CSS property reserves the space a scrollbar would take before there is one, so a panel does not shift sideways the moment its content overflows. `stable` reserves the end edge, `stable both-edges` both — which is what keeps centred content centred. One of: auto, stable, stable both-edges
`scrollTimeline` Interaction & overflow	`scrollTimeline="page block"`	`scroll-timeline: --page block`	Declares a named scroll timeline on this scroller — the shorthand, `<name>` or `<name> <axis>`, and the one to reach for: the longhands exist to override half of it. The name is written with or without the `--`, the way an anchor's is. Anything inside this element can then name it on `animationTimeline`; anything outside needs a `timelineScope` on a common ancestor. Includes: none
`scrollTimelineAxis` Interaction & overflow	`scrollTimelineAxis="block"`	`scroll-timeline-axis: block`	Which axis of this scroller the named timeline follows. `block`/`inline` are the writing mode's, so a timeline declared on the block axis is the vertical one in English and still correct in Japanese. One of: block, inline, x, y
`scrollTimelineName` Interaction & overflow	`scrollTimelineName="page"`	`scroll-timeline-name: --page`	The name half of `scrollTimeline`, on its own. Includes: none
`viewTimeline` Interaction & overflow	`viewTimeline="card block"`	`view-timeline: --card block`	Declares a named view timeline on this element — its own progress across the scrollport, rather than the scroller's progress through its content. Same shorthand shape as `scrollTimeline`, and the same rule about who can see the name. Includes: none
`viewTimelineAxis` Interaction & overflow	`viewTimelineAxis="block"`	`view-timeline-axis: block`	Which axis this element's pass across the scrollport is measured on. One of: block, inline, x, y
`viewTimelineInset` Interaction & overflow	`viewTimelineInset="20%"`	`view-timeline-inset: 20%`	Shrinks the scrollport the timeline measures against, so the pass starts and ends somewhere other than the viewport edges: one value for both ends, two for the start and the end. A positive inset moves the edge inwards, which is what makes an element count as "in view" before it really is.
`viewTimelineName` Interaction & overflow	`viewTimelineName="card"`	`view-timeline-name: --card`	The name half of `viewTimeline`, on its own. Includes: none
`timelineScope` Interaction & overflow	`timelineScope="page"`	`timeline-scope: --page`	Makes the named timelines below this element reachable from anywhere else below it. A timeline is otherwise visible only to the declaring element's own descendants, so a progress bar that is not inside the article it tracks needs their common ancestor to declare the scope. Comma-separated. Includes: none
`viewTransitionName` Interaction & overflow	`viewTransitionName="header"`	`view-transition-name: header`	Names this element for a view transition, which is what makes the browser animate it from where it was to where it is rather than cross-fading the whole page over it. A name has to be unique in the document while the transition runs — two elements sharing one is how a transition silently does nothing — so a list wants a name per item, and that is a rule per item this library would never free: write those with `props={{ style: { viewTransitionName: id } }}`, the exception `useAnchorPosition` already takes. This prop is for the handful of names a layout has (`header`, `main`, `sidebar`). Includes: none, auto, match-element
`viewTransitionClass` Interaction & overflow	`viewTransitionClass="card"`	`view-transition-class: card`	A class shared by several named elements, so one rule styles the lot of them: `::view-transition-group(.card)` reaches every element carrying `viewTransitionClass="card"`. Space separated for more than one. Includes: none
`vars` Escape hatches	`vars={{color-revenue: "sky-500"}}`	`--color-revenue: var(--sky-500,oklch(68.5% .169 237.3))`	CSS custom properties on this element, inherited by everything inside it: `vars={{ 'color-x': 'sky-500' }}` emits `--color-x: var(--sky-500)`. The one prop whose declaration names come from its value, which is what makes it the answer for markup this library does not render — a Recharts `<Line>`, a third-party widget. A colour token becomes the variable behind it, anything else is written out as it stands.
`css` Escape hatches	`css={{mixBlendMode: "multiply"}}`	`mix-blend-mode: multiply`	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.

The same table as one file, for an editor or an agent, is /props.md. Everything Box carries that is not a prop — Box.extend(), Box.components(), Box.Theme and the rest — is on Box functions.