WinSectionHeader

A bold, black section heading (h3) — the classic Win2k group box label.

When to use

Use WinSectionHeader to label sections within a page or dialog.

When not to use

Do not use WinSectionHeader for page titles or window titles. Use the page heading or WinTitleBar instead.

Install the package:

npm install win2k-ui

Then import the component:

import { WinSectionHeader } 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.

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

Default usage

Configure your system preferences, hardware settings, and user account options below.

Grouped sections

Screen resolution, color depth, and refresh rate settings.

Device Manager, driver configuration, and system resources.

Network adapters, TCP/IP settings, and dial-up connections.

All available props for the WinSectionHeader component.

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Heading text.
`className`	`string`	`''`	Additional CSS classes.

Example showing the component in a typical context:

import { WinSectionHeader } from 'win2k-ui'

export function Example() {
  return (
    <WinSectionHeader>System Settings</WinSectionHeader>
  )
}