WinStatusBar

A bottom status bar with muted text. Left-aligned status text, optional right-aligned content.

When to use

Use WinStatusBar at the bottom of windows, dialogs, or pages to show status information.

When not to use

Do not use WinStatusBar for primary content. Use it only for supplementary status info.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinStatusBar } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Default

Ready

With extra content on the right

3 items selected

CPU: 12%

Complex status bar

Saving file...

Modified|DOC: 12 KB

Props

All available props for the WinStatusBar component.

Prop	Type	Default	Description
`text`	`string`	`—`	Main status text on the left.
`children`	`ReactNode`	`—`	Optional content on the right.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinStatusBar } from 'win2k-ui'

export function Example() {
  return (
    <WinStatusBar text="Ready">
      <span>CPU: 2%</span>
    </WinStatusBar>
  )
}