Status bar

The strip along the bottom of a desktop app for connection state, background work, counts and keyboard hints.

npx prodular-ui add status-bar

App status bar

Connection, branch, a live sync with progress, a selection count and a shortcut hint.

import * as React from "react"import { GitBranchIcon, WifiIcon } from "lucide-react"
import { HotkeyKeys } from "@/components/ui/hotkeys"import { Status } from "@/components/ui/status"import { StatusBar, StatusBarGroup, StatusBarItem, StatusBarProgress, StatusBarSpacer } from "@/components/ui/status-bar"
export default function StatusBarApp() {  const [sync, setSync] = React.useState(35)  React.useEffect(() => {    const t = setInterval(() => setSync((v) => (v >= 100 ? 0 : v + 5)), 500)    return () => clearInterval(t)  }, [])  return (    <div className="w-full max-w-3xl overflow-hidden rounded-lg border">      <div className="h-24 bg-background" />      <StatusBar>        <StatusBarGroup>          <StatusBarItem live>            <WifiIcon />            <Status variant="success" size="xs">              Connected            </Status>          </StatusBarItem>          <StatusBarItem>            <GitBranchIcon />            main          </StatusBarItem>        </StatusBarGroup>        <StatusBarGroup>          <StatusBarItem live>Syncing ledger {sync}%</StatusBarItem>          <StatusBarProgress value={sync} label="Ledger sync" />        </StatusBarGroup>        <StatusBarSpacer />        <StatusBarItem>3 selected</StatusBarItem>        <StatusBarItem className="hidden sm:flex">          Command palette <HotkeyKeys keys="mod+k" />        </StatusBarItem>      </StatusBar>    </div>  )}

Anatomy

<StatusBar>  <StatusBarGroup>    <StatusBarItem live><Status variant="success" size="xs">Connected</Status></StatusBarItem>  </StatusBarGroup>  <StatusBarSpacer />  <StatusBarItem>3 selected</StatusBarItem></StatusBar>

Guidance

Use it when

Desktop apps and workspaces that run background work or hold a connection.
Short readings: Connected, 3 selected, Synced 14:31.
live on items that change on their own.

Avoid

Actions people need often. Put them in the toolbar or command palette.
Notifications. Use Toast.
More than five or six items. It truncates on small screens.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Put StatusBar as the last child of the app frame, under the Workspace.
Group related items in StatusBarGroup; use StatusBarSpacer to push the rest right.
Use Status for connection state, not colored text.
Give StatusBarProgress a label naming the work.

API

StatusBarItem

Prop	Type	Default	Description
live	boolean	false	Announces changes politely to screen readers.

StatusBarProgress

Prop	Type	Default	Description
value	number		0 to 100.
label	string		Names the work, for example "Ledger sync".

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add status-bar# or, with the registry in components.jsonnpx shadcn@latest add @prodular/status-bar