WinTitleBar

A navy gradient title bar with white bold text. Left-aligned title, optional right-aligned content.

When to use

Use WinTitleBar as the header for WinDialog, or standalone to label a window-like section.

When not to use

Do not use WinTitleBar for page-level headings. Use WinSectionHeader instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinTitleBar } 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

My Window

With extra content

Session Manager

Sessions: 3

Dialog title bar

Confirm

Props

All available props for the WinTitleBar component.

Prop	Type	Default	Description
`title`	`string`	`—`	Text displayed on the left side.
`children`	`ReactNode`	`—`	Optional extra content on the right side.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinTitleBar } from 'win2k-ui'

export function Example() {
  return (
    <WinTitleBar title="My Window">
      <span className="text-win-white text-xs">Sessions: 3</span>
    </WinTitleBar>
  )
}