Pinned sides
Give an entry align="start" or align="end" to pin
it to a side. The two groups are pushed apart by a fluid spacer — like an
editor status bar. The most important entry sits on the outer edge
of each group.
Two groups, one bar
Pin the clock:
<StatusBarViewport mode="stack" />
Toggle the clock's align and watch it hop from the right
group to the left. Within each group, lower priority numbers win the
outer edge: main ✓ and Ln 12, Col 4 (both
priority 0) sit furthest out.
tsx
<StatusBarViewport mode="stack" separator="•" />
{/* start group — most important on the far left */}
<StatusBar align="start" priority={0}>main ✓</StatusBar>
<StatusBar align="start" priority={3}>Spaces: 2</StatusBar>
{/* end group — most important on the far right */}
<StatusBar align="end" priority={0}>Ln 12, Col 4</StatusBar>
<StatusBar align="end" priority={4}>Prettier</StatusBar>Required CSS
The bar ships unstyled. Sides need a flex .statusbar with
flex groups; the spacer's flex: 1 is also set inline, so
sides separate even before you add CSS.
css
.statusbar__group { display: flex; align-items: center; gap: 0.5rem; }
.statusbar__spacer { flex: 1 1 auto; } /* also set inline */