Skip to main content

React Compatibility

Significant White Space

Similar to vanilla <span> elements, inline elements defined in HelixUI may rely on significant white space surrounding the tag in the HTML.


JSX has been found to remove significant white space in certain scenarios (see demo below).

Demonstration of JSX Collapsing White Space


If you have encountered one of the scenarios demonstrated above, there are two strategies available to correct it.

  1. Rearrange your JSX markup so that it retains the needed white space.
  2. Add a literal white space text node ({' '}) where it is needed.