WinBox

A white container with a raised bevel border — the foundational building block for dialogs, cards, and grouped content.

When to use

Use WinBox whenever you need a visible container with the classic Win2k raised border. It is the base wrapper for WinCard and WinDialog.

When not to use

Do not use WinBox for layout-only wrappers that don't need a visible border. Use a plain <div> instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

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

This is a default WinBox with the standard 8px padding and raised bevel border — the foundational container for all Win2k UI.

With custom padding

A WinBox with extra padding (p-6) for more spacious layouts.

Nested boxes

Outer Container

Nested inner box

Props

All available props for the WinBox component.

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Content inside the box.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinBox } from 'win2k-ui'

export function Example() {
  return (
    <WinBox>
      <p>This is content inside a WinBox.</p>
    </WinBox>
  )
}