WinTabs

A classic Win2k tab control with horizontal tab strip and content panel. Active tab has raised bevel, inactive tabs are flat.

When to use

Use WinTabs to organize related content into switchable panels — settings dialogs, property sheets, multi-section forms.

When not to use

Do not use WinTabs for navigation between pages. Use sidebar links instead. Do not exceed 8-10 tabs without overflow handling.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinTabs } 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 with 3 tabs

General settings: configure your basic preferences.

With many tabs (overflow)

General tab content.

Props

All available props for the WinTabs component.

Prop	Type	Default	Description
`tabs`	`{ label: string; content: ReactNode }[]`	`—`	Array of tab definitions with label and content.
`defaultIndex`	`number`	`0`	Initially active tab index.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinTabs } from 'win2k-ui'

export function Example() {
  return (
    <WinTabs
      tabs={[
        { label: "General", content: <p>General settings</p> },
        { label: "Security", content: <p>Security settings</p> },
      ]}
    />
  )
}

Notes

WinTabs is a client component that manages tab switching state. The active tab overlaps the content panel's top border by using a negative bottom margin. A trailing spacer fills the remaining space after the last tab.