Style props

The exhaustive catalogue. Every primitive — Box, Stack, Pressable, Text, the typography suite, styled() outputs — accepts the props listed here. Concept-level discussion lives on Style props; this page is the lookup.

CSS property props

Every CSS property motif resolves through is exposed as a prop. Names line up with the camelCase JS form (backgroundColor, paddingInline, gridTemplateColumns). The full set is exported from @usemotif/core as STYLE_PROP_NAMES.

import { STYLE_PROP_NAMES, isStyleProp, styleProps } from '@usemotif/core';
 
STYLE_PROP_NAMES.length;  // ~250
isStyleProp('backgroundColor');  // true
styleProps['backgroundColor'];   // { property: 'background-color', category: 'color', … }

styleProps is a map from prop name to its definition (StylePropDefinition). The definition carries the CSS property it serialises to, the value category (color, length, keyword, …), and whether the prop is responsive-eligible.

Shorthand props

A small set of single-letter and two-letter aliases. Stable across releases.

px / mx, the ps / pe / ms / me shorthands, and the start / end insets are logical — they resolve relative to the writing direction, so a layout mirrors correctly under RTL. The physical pl / pr / ml / mr aliases are kept as an explicit escape hatch. See Direction for setting the writing direction of a subtree.

Pseudo-state props

Style bags applied when a pseudo-class is true. Four states are exposed.

import { PSEUDO_STATE_PROP_NAMES } from '@usemotif/core';
 
PSEUDO_STATE_PROP_NAMES;
// ['_hover', '_focus', '_active', '_disabled'] as const

On web, the runtime emits one CSS rule per unique pseudo-state bag, hashed into a class. On native, the bags drive Pressable's state callbacks.

Pseudo-element props

Style bags applied to generated content. Two pseudo-elements are exposed.

import { PSEUDO_ELEMENT_PROP_NAMES } from '@usemotif/core';
 
PSEUDO_ELEMENT_PROP_NAMES;
// ['_before', '_after'] as const

Both are web-only — native has no analogue. The bag accepts every CSS property, plus the required content property when generating a pseudo-element.

<Box
_before={{ content: '"›"', mr: '$space.2', color: '$colors.text.muted' }}
/>

Motion props

Animation and transition props plus enter/exit hooks for unmount animations.

import { MOTION_PROP_NAMES } from '@usemotif/core';
 
MOTION_PROP_NAMES;
// ['enterStyle', 'exitStyle', 'transition', 'animation', 'animateOnly'] as const

Motion values resolve through the same token pipeline as colour and spacing. transition: { duration: '$durations.2' } is first-class.

Container query prop

_container declares a container-query block. The keys are container-query syntax ('@container (min-width: 480px)'); the values are style bags.

<Box
containerType="inline-size"
_container={{
  '@container (min-width: 480px)': { p: '$space.6', fontSize: '$fontSizes.lg' },
}}
/>

The containerType (or containerName) prop turns the element into a query container; the _container prop responds inside it. See Responsive for the full container-query model and the available syntactic forms.

Helpers exported from @usemotif/core

For tooling and runtime-introspection use cases.

import {
isStyleProp,
isMotionProp,
isPseudoStateProp,
isPseudoElementProp,
STYLE_PROP_NAMES,
PSEUDO_STATE_PROPS,
PSEUDO_ELEMENT_PROPS,
MOTION_PROPS,
styleProps,
} from '@usemotif/core';

Compiler plugins consume these to classify JSX attributes during static extraction. Application code rarely needs them.

Related

• Style props (concept) — the model behind the catalogue.
• Responsive — the breakpoint and container-query system that builds on every prop here.
• Breakpoints — the responsive-key catalogue.
• Direction — the writing direction the logical props resolve against.