WinGroupBox

A framed container with a label in the top-left corner — the classic Win2k group box control for organizing related settings.

When to use

Use WinGroupBox to visually group related form controls, settings, or configuration options together.

When not to use

Do not use WinGroupBox for simple visual grouping without a label. Use WinBox instead. Do not nest more than 2 levels deep.

Installation

Install the package:

npm install win2k-ui

Then import the component:

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

System Settings

Content placed inside a group box with a labeled border.

With inputs

User Information

Nested group boxes

Advanced Settings

Main settings area.

Sub Settings

Nested configuration options.

Props

All available props for the WinGroupBox component.

Prop	Type	Default	Description
`label`	`string`	`—`	Label text displayed in the top-left border.
`children`	`ReactNode`	`—`	Content inside the group box.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinGroupBox } from 'win2k-ui'

export function Example() {
  return (
    <WinGroupBox label="Display Settings">
      <p>Content here</p>
    </WinGroupBox>
  )
}

Notes

WinGroupBox uses the HTML <fieldset> and <legend> elements for semantic structure and accessibility. The sunken bevel border wraps around the content with the label sitting on the top border line.