WinInput

A sunken text input with bevel borders. Supports text, number, date, and all standard HTML input types.

When to use

Use WinInput wherever you need a text, number, or date input styled with the Win2k aesthetic.

When not to use

Do not use WinInput for password fields — use WinInput with type="password" instead (same component, different type).

Installation

Install the package:

npm install win2k-ui

Then import the component:

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

Text input

NameAwaiting input...

Number input (with min/max)

AgeValue: 42

Date input

Date of birth

Disabled input

System (read-only)

Input states

Props

All available props for the WinInput component.

Prop	Type	Default	Description
`...props`	`InputHTMLAttributes`	`—`	All standard HTML input attributes.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinInput } from 'win2k-ui'

export function Example() {
  return (
    <div className="flex flex-col gap-2">
      <WinInput type="text" placeholder="Enter your name" />
      <WinInput type="number" min={0} max={100} placeholder="Age" />
    </div>
  )
  }

Notes

For password or sensitive fields, simply use `type="password"` with WinInput. The sunken bevel border is consistent with all Win2k input controls. Focus state changes the border to navy for clear visual feedback. The component forwards all standard HTMLInputAttributes via rest props.