Responsive values in NebulaKit are mobile-first and forward-only.

• A value defined at base applies to all breakpoints

• A value defined at a breakpoint applies from that breakpoint upward

• Values are never unset automatically at later breakpoints

Any property typed as RespValue and marked as responsive in the props table can accept either a single value or an object of breakpoint-specific values, like in this example where padding changes between the base and md breakpoints.

Result:

• base, sm - 10px

• md, lg, xl - 50px

When combining responsive and non-responsive props, the more specific one wins.

In the above example, paddingBottom isn't a breakpoint object, so it applies to all breakpoints by default. Because it's more specific than padding, its value overrides the final bottom padding at every breakpoint.

If a value is defined only at a later breakpoint, it does not affect earlier ones:

Result:

• base, sm - no padding applied

• md, lg, xl - 50px

Responsive values can override forward, but they never cancel earlier values. If you need a different value at a later breakpoint, provide it explicitly:

This model keeps responsive behavior predictable, avoids hidden defaults and ensures styles never change implicitly when breakpoints shift.