React Status Bar

The bar ships unstyled — it emits a small, stable set of class names and you bring the looks. Copy a base sheet below to get running, then tweak. Because the component owns its internal markup, the cleanest route in any framework is to target those class names.

Wired up with base styles

The same class names the snippets below target — pinned sides, a separator, and a hover-free editor look.

Plain CSS

Framework-free. Drop this in a stylesheet and you're done.

css

/* The bar itself (the role="status" live region). */
.statusbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 28px;
  padding-inline: 0.75rem;
  font-size: 0.8125rem;
  color: #c9d1d9;
  background: #0d1117;
  border-top: 1px solid #21262d;
}

/* Pinned sides: each side is a flex group; the spacer pushes them apart. */
.statusbar__group { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.statusbar__spacer { flex: 1 1 auto; }

/* Per-entry wrapper + the separator between stacked entries. */
.statusbar__item { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.statusbar__sep { opacity: 0.4; }

/* overflow="clip": single line; position:relative contains the measure layer. */
.statusbar--clip { position: relative; flex-wrap: nowrap; overflow: hidden; }

/* State hooks. */
.statusbar[data-empty] { color: #6e7681; font-style: italic; }
.statusbar[data-clipped]::after { content: "…"; opacity: 0.5; padding-inline-start: 0.25rem; }

Tailwind

Style the component's classes in a @layer components block with @apply. This keeps all elements covered — including the internal __group, __spacer and --clip nodes that utility classes on your JSX can't reach.

css

/* app.css — Tailwind v4 */
@import "tailwindcss";

@layer components {
  .statusbar {
    @apply flex items-center gap-2 min-h-7 px-3 text-[13px]
           text-zinc-200 bg-zinc-900 border-t border-zinc-800;
  }
  .statusbar__group  { @apply flex items-center gap-2 min-w-0; }
  .statusbar__spacer { @apply flex-1; }
  .statusbar__item   { @apply inline-flex items-center gap-1 whitespace-nowrap; }
  .statusbar__sep    { @apply opacity-40; }
  .statusbar--clip   { @apply relative flex-nowrap overflow-hidden; }
  .statusbar[data-empty]   { @apply text-zinc-500 italic; }
  .statusbar[data-clipped]::after { content: "…"; @apply opacity-50 ps-1; }
}

Prefer utilities on the JSX? className is appended to the bar and renderItem wraps each entry — but you still need the two group rules in CSS for align:

tsx

<StatusBarViewport
  mode="stack"
  separator={<span className="opacity-40">•</span>}
  // className is appended to the .statusbar element
  className="min-h-7 px-3 text-[13px] text-zinc-200 bg-zinc-900 border-t border-zinc-800"
  renderItem={(entry) => (
    <span className="inline-flex items-center gap-1 whitespace-nowrap">
      {entry.node}
    </span>
  )}
/>

// The component still renders .statusbar__group / __spacer itself, so when you
// use `align` keep these two rules in CSS (utilities can't reach those nodes):
//   .statusbar__group  { @apply flex items-center gap-2 min-w-0; }
//   .statusbar__spacer { @apply flex-1; }

What you can target

Selector	Element
`.statusbar`	The bar / live region (`role="status"`).
`.statusbar--replace` / `--stack`	Current `mode` modifier.
`.statusbar--clip`	Present when `overflow="clip"`.
`.statusbar__group--start` / `--end`	The two pinned-side groups.
`.statusbar__spacer`	Fluid gap between the groups.
`.statusbar__item`	Default per-entry wrapper (replaced by `renderItem`).
`.statusbar__sep`	Separator between stacked entries.
`[data-empty]`	Set when there are no entries.
`[data-clip]`	Set when `overflow="clip"` is on.
`[data-clipped]`	Set while one or more entries are hidden for space.

Styling