Responsive

Every style prop accepts more than one value. Pass an object keyed by breakpoint, a positional array, or a compact string — viewport queries and container queries fall out of the same shape.

Responsive props are values

A literal value applies unconditionally. A responsive object spreads the same prop across breakpoints — base for the unconditional case, named keys for each breakpoint upward.

<Box
bg={{ base: '$colors.surface.muted', md: '$colors.surface.base' }}
p={{ base: '$space.3', md: '$space.4', lg: '$space.6' }}
/>

Motif resolves each slot, emits one rule per breakpoint, and hashes the lot into a generated class. The base slot lands on inline style; everything else becomes a media query in a stylesheet injected once and shared across the page.

Three forms for the same value

The object form is the long version. Two shorter ones exist for places where they read more clearly.

The array form is positional: [base, sm, md, lg, xl, '2xl']. Trailing slots are optional; undefined slots are dropped.

<Box p={['$space.3', '$space.4', '$space.6']} />
//      base         sm           md

The DSL form is a single string of <key>:<value> pairs separated by whitespace.

<Box gap="base:2 md:4 lg:8" />

Numbers in the DSL are coerced when they parse cleanly. "md:8" becomes { md: 8 }; "md:8px" stays a string. Use whichever reads best at the call site — they all compile to the same rules.

Mobile-first breakpoints

The default breakpoint set is Tailwind-aligned and mobile-first:

Each rule is a min-width query. A value at md applies from 768px upward and stays applied until something at lg or xl overrides it. Write the smallest-screen value at base and let larger screens add to it.

Container queries scope to a parent

Some components should respond to their container's width, not the viewport's. A card in a sidebar is the same component as a card in the main column, but it has half the room. For those cases, prefix the breakpoint with @.

<Box
// matches the nearest ancestor that opted into container queries
flexDirection={{ base: 'column', '@md': 'row' }}
// matches a named container — `<Box style={{ container: 'card / inline-size' }}>`
gap={{ base: '$space.2', '@card.md': '$space.4' }}
/>

@<bp> binds to the nearest container ancestor. @<name>.<bp> binds to a container with that name. Container queries don't replace media queries — they sit alongside them in the same object.

One source, three queries

A responsive value is a description, not a query. Motif decides whether each slot becomes a media rule, a container rule, or an inline style based on the slot's key. The component author writes one shape; the platform decides how to enforce it.

That is also why the same prop accepts every form. Whether you reach for the object, the array, or the DSL is a question of taste at the call site — none of them is faster, none is more expressive than the others, and motif deduplicates the resulting CSS regardless.